使用el-upload上传单文件多文件前后端实现

需求：不自动上传文件并保存本地

1.单文件

上传单文件时可以使用action上传路径，调用自带的submit方法实现

前端代码：

<el-form-item prop="file">
<el-upload :limit="1" 
           :auto-upload="false" 
           :file-list="form.bannerUrl"
           :action="uploadUrl" ref="upload"
           list-type="picture-card"
           :on-change="fileChange"
           :on-remove="handleRemove">
           <i class="el-icon-plus"></i>
           <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>

export default {
        name: "AddBanner",
        data(){
            return{
            uploadUrl:"[后端上传路径]",
            file:null
         }
       },
       methods:{
            handleRemove(file, fileList) {
                //是否有上传文件的表单验证可忽略
                if (fileList.length === 0) {
                    this.file = null
                    this.$refs.form.validateField('file')
                }
            },
            fileChange(uploadFile, fileList) {
                this.file = uploadFile;
                //是否有上传文件的表单验证可忽略
                if (fileList.length !== 0) {
                    this.$refs.form.validateField('file')
                }
            },
      }
}

在实现提交的方法里加上 this.$refs.upload.submit()；（upload对应el-upload中ref="upload"）

后端代码：

controller：

@Autowired
private IExhibitService iExhibitService;

@PostMapping("/upload")
public JsonResult upload(@RequestParam("file") MultipartFile picFile) throws IOException{
        String data=iUploadService.fileUpload(picFile,"banners");
        return JsonResult.ok(data);
}

注：@RequestParam("file")一定要加，前端默认传过来的文件名为file，没有会报错；

使用MultipartFile接受前端传来的文件，关于MultipartFile

JsonResult 为自定义的给前端的返回结果类，如没有就替换为void，返回值依据自身情况而定。

Service:

public interface IUploadService {

    String fileUpload(MultipartFile picFile,String folderName) throws IOException;

    void fileRemove(String fileUrl);

}

@Service
public class UploadFileService implements IUploadService {

    private String dirPath = "D:/ProgramData";
    @Override
    public String fileUpload(MultipartFile picFile,String folderName) throws IOException{
        String fileName = picFile.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        fileName = UUID.randomUUID()+suffix;
        File dirFile = new File(dirPath);
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        String filePath = dirPath + "/"+folderName + "/"+ fileName;
        File dirFile2=new File(filePath);
        if (!dirFile2.exists()){
            dirFile2.mkdirs();
        }
        picFile.transferTo(dirFile2);
        return "/"+folderName + "/"+ fileName;
    }

    @Override
    public void fileRemove(String fileUrl) {
        String filePath = dirPath+fileUrl;
        new File(filePath).delete();
    }

}

2.多文件

不使用action的上传路径，需要一次上传多个文件，即一个文件数组；

前端代码：

<el-form-item class="f-start" prop="file" label="上传商品图片:">
   <el-upload :auto-upload="false" 
              :file-list="form.exhibitImgs"
              action="" ref="upload"
              list-type="picture-card"
              :on-change="fileChange"                  
              :on-remove="handleRemove">
     <i class="el-icon-plus"></i>
     <div slot="tip" class="el-upload__tip">多个或单个，只能上传jpg/png文件，且不超过500kb 
     </div>
   </el-upload>
</el-form-item>

export default {
        name: "AddBanner",
        data(){
            return{
            uploadUrl:"[后端上传路径]",
            file:null,
            exhibitImgs:[]
         }
       },
       methods:{
            handleRemove(file, fileList) {
                //是否有上传文件的表单验证可忽略
                if (fileList.length === 0) {
                    this.file = null
                    this.$refs.form.validateField('file')
                }
            },
            fileChange(uploadFile, fileList) {
                 this.file = uploadFile;
                this.exhibitImgs=fileList;
                if (fileList.length !== 0) {
                    this.$refs.form.validateField('file')
                }
            },
      }
}

           submitImg(){

                if (this.exhibitImgs.length===0){
                    return this.$message.warning('请选取文件后再上传');
                }
                let formData=new FormData();
                let count =this.exhibitImgs.length;
                for (let i=0;i<count;i++){
                    formData.append("files",this.exhibitImgs[i].raw)
                }
                let url="上传路径"
                this.axios.post(url,formData).then((response)=>{
                    //xxxx自定义
                })
            },

注：前端传数组需要以formData的形式传，append方法会在一个值对后面再加一个值，组成一个数组；

如

formdata.append("apple",1);
formdata.append("apple",2);
formdata.append("apple",3);
//最终apple:[1,2,3]

注：console.log(formdata)不是添加的一组组键值对数据，需要console.log (formdata.getAll ("apple"))才能输出apple数组，且获取整个数组要用getAll，用get方法只能输出数组第一个元素

后端代码：

思路和单文件一致，但需注意：

public void uploadExhibitImg(@RequestParam("files")MultipartFile[] picFiles)

这里接受参数为MultipartFile数组，@RequestParam("files")变量名为前端传递的formData的键名

至此上传文件基本完工。