vue上傳文件formData上傳的解決全流程

更新時(shí)間：2022年06月02日 09:17:10 作者：大明湖畔寫代碼

這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue上傳文件formData上傳解決

axios實(shí)例的配置關(guān)鍵配置

FormData 上傳文件類型有變項(xiàng)目中封裝的公共方法需要更改頭部請(qǐng)求信息設(shè)置為設(shè)為 “multipart/form-data”

整體流程解決跨域上傳文件跨域上傳FormData格式等問題

vue中Dom結(jié)構(gòu)

<input type=“file” @change=“handleUpload” />

上傳圖片更改傳遞到接口事件

const handleUpload = (e) => {
const service = axios.create({
baseURL: ‘/api',
withCredentials: true // cors跨域要讓后臺(tái)設(shè)置cors跨域需后臺(tái)設(shè)配合
})
const params = new FormData() // 聲明formData數(shù)據(jù)類型
params.append(‘file', event.target.files[0])
params.append(‘tp', ‘partImg')
service
.post(‘UploadFiles/UploadImg', params, {
headers: {
‘Content-Type': ‘multipart/form-data'// 修改請(qǐng)求頭
}
})
.then(res => {
// console.log(‘提交成功');
})
}

handleUpload需要在vue3項(xiàng)目中return

baseURL設(shè)置為api vue項(xiàng)目中創(chuàng)建vue.config文件并寫入proxy跨域代理vue2和vue3都支持

vue 批量上傳文件

業(yè)務(wù)背景：一次性批量上傳多個(gè)文件，只請(qǐng)求一次接口,則手動(dòng)提交到后臺(tái)

簡(jiǎn)單說明一個(gè)實(shí)現(xiàn)思路

前端vue統(tǒng)一處理多個(gè)文件保存到formData對(duì)象中，請(qǐng)求后臺(tái)接口
后臺(tái)接口使用HttpServletRequest 進(jìn)行接收，可轉(zhuǎn)化成MultipartHttpServletRequest對(duì)象接收前端formData對(duì)象

//前端使用的UI組件是Ant Design of Vue的upload組件
<template>
  <div class="clearfix">
    <a-upload
      :multiple="true"
      :before-upload="beforeUpload"
      :list-type="listType"
      :file-list="fileList"
      @preview="handlePreview"
      @change="handleChange"
      @download="handleDownload"
    >
      <div v-if="isMore">
        <a-icon type="plus" />
        <div class="ant-upload-text">文件上傳</div>
      </div>
      <div v-if="!isMore && fileList.length < 1">
        <a-icon type="plus" />
        <div class="ant-upload-text">文件上傳</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

JS的核心代碼：

handleUpload() {
? ? ? const { fileList } = this
? ? ? if (fileList.length > 0) {
? ? ? ? var notUploaded = []
? ? ? ? var uploaded = []
? ? ? ? fileList.forEach((item) => {
? ? ? ? ? if (item.status && item.status === 'done') {
? ? ? ? ? ? uploaded.push(item.url)
? ? ? ? ? } else {
? ? ? ? ? ? notUploaded.push(item)
? ? ? ? ? }
? ? ? ? })
? ? ? ? let formData = new FormData()
? ? ? ? notUploaded.forEach((file, index) => {
? ? ? ? ? //所有文件保存在formData中
? ? ? ? ? formData.append(`file${index}`, file.originFileObj)
? ? ? ? })
? ? ? ? console.log('formData', JSON.stringify(formData))
? ? ? ? //請(qǐng)求批量上傳接口
? ? ? ? batchUploadFile(formData, this.targetS).then((res) => {
? ? ? ? ? if (res.success) {
? ? ? ? ? ? console.log('res', JSON.stringify(res))
? ? ? ? ? } else {
? ? ? ? ? ? this.$message.error('圖片上傳失敗，請(qǐng)重新上傳')
? ? ? ? ? }
? ? ? ? })
? ? ? ? // return
? ? ? ? //this.$emit('loadImgUrl', this.loadImgUrl.join(','))
? ? ? ? //this.fileList = []
? ? ? } else {
? ? ? ? // 如果沒有圖片則返回空
? ? ? ? //this.$emit('loadImgUrl', '')
? ? ? ? //this.fileList = []
? ? ? }
? ? },

后臺(tái)代碼：

? ? @ApiOperation(value = "批量文件上傳（最多同時(shí)上傳5個(gè)文件）", notes = "批量文件上傳")
? ? @PostMapping("/batchUploadFile/{filePath}")
? ? public Result<?> batchUploadFile(@ApiParam(value = "自定義上傳文件的路徑")
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@PathVariable("filePath") String filePath,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?HttpServletRequest request) throws Exception {
? ? ? ? MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
? ? ? ? Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
? ? ? ? if (fileMap.isEmpty()) {
? ? ? ? ? ? return Result.error("上傳文件不能為空");
? ? ? ? }
? ? ? ? if (fileMap.size() > 5) {
? ? ? ? ? ? return Result.error("批量上傳文件數(shù)量不能超過5個(gè)文件");
? ? ? ? }
? ? ? ? List<Map<String, Object>> mapList = ftpUtils.batchUploadFile(fileMap, filePath);
? ? ? ? return Result.OK(mapList);
? ? }

注意：以上代碼部分功能不完全只能作為參考，重點(diǎn)是實(shí)現(xiàn)思路

1.前端是如何組裝參數(shù)

let formData = new FormData()
? ? ? ? notUploaded.forEach((file, index) => {
? ? ? ? ? //所有文件保存在formData中
? ? ? ? ? formData.append(`file${index}`, file.originFileObj) //核心代碼
? ? ? ? })

2.后臺(tái)使用MultipartHttpServletRequest對(duì)象進(jìn)行接受

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
? ? ? ? Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();

前端參數(shù)格式：