vue+element-ui+axios多文件上传的实现并显示整体进度

目录

• element-ui+axios多文件上传并显示进度
• 解决element ui多文件上传的问题
• 业务场景
• 解决办法

element-ui+axios多文件上传并显示进度

element-ui自带的多文件上传是做成了多文件多次上传,公司有需求需要选取多个文件一次上传全部.

代码部分

<template>
  <d2-container>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="图片"  prop="mediaFileUrl">
            <el-upload style="width: 100%;"
              class="upload-demo"
              ref="uploadMul"
              multiple
              action
              drag
              :limit="maxUploadSize"
              :on-exceed="uploadLimit"
              :http-request="uploadFile"
              :file-list="fileList"
              :auto-upload="false"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-change="uploadChange"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">支持上传jpg/png/gif文件，且不超过100M</div>
            </el-upload>
            <div v-show="progressFlag" class="head-img">
              <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
            </div>
            <el-button size="mini" type="success" @click="submitUpload">上传到服务器</el-button>
            <el-button v-if="this.fileList.length > 0" size="mini" type="warning" @click="clearFiles">清空</el-button>
          </el-form-item>
        </el-col>
        <el-col :offset="4"></el-col>
      </el-row>
    </el-form>
  </d2-container>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      maxUploadSize: 10,
      progressFlag: false,
      progressPercent: 10,
      innerVisible: false,
      fileList: [],
      isViewDisabled: false,
      formData: {},
      param: {} // 上传文件主要参数
    }
  },
  methods: {
    submitUpload () {
      if (this.fileList.length < 1) {
        this.$message.warning('请选择文件!')
        return false
      }
      this.$refs.uploadMul.submit()
      if (this.param instanceof FormData) {
        // 附加参数
        this.param.append('expirationsec', 0)
        this.param.append('fileproperty', 'publicfiles')
        // const config = {
        //   headers: { 'content-type': 'multipart/form-data' }
        // }
        // axios.post('/api/oss/ossUploadObject', this.param, config).then(res => {
        //   if (res.status === 200 && res.data.status === 200) {
        //     this.$message.success('上传成功!')
        //     let result = res.data.body.data
        //     console.log(result)
        //   }
        //   this.$refs.uploadMul.clearFiles()
        //   this.param = {}
        // })
        let that = this
        that.progressFlag = true
        axios({
          url: '/api/oss/ossUploadObject',
          method: 'post',
          data: that.param,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            // 进度条
            that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0) | 0
          }
        }).then(res => {
          this.param = {}
          this.fileList = []
          console.log(res)
          if (res.data.status === 200 && that.progressPercent === 100) {
            setTimeout(function () {
              that.$message({
                message: '上传成功！',
                type: 'success',
                duration: '2000'
              })
              that.progressFlag = false
              that.progressPercent = 0
              that.$refs.uploadMul.clearFiles()
            }, 1000)
            let result = res.data.body.data
            console.log(result)
          } else {
            setTimeout(function () {
              that.$message({
                message: res.data.msg,
                type: 'error',
                duration: '2000'
              })
              that.progressFlag = false
              that.progressPercent = 0
              that.$refs.uploadMul.clearFiles()
            }, 1000)
          }
        }).catch(() => {
          that.progressFlag = false
          that.progressPercent = 0
          that.$refs.uploadMul.clearFiles()
          that.$message({
            message: '上传失败！',
            type: 'error',
            duration: '2000'
          })
        })
      } else {
        console.log(this.param instanceof FormData)
      }
    },
    handleRemove (file, fileList) {
      this.$message.warning(`已移除文件:  ${file.name}!`)
      // 每移除一个文件,param重新赋值
      this.param = new FormData()
      this.fileList = [...fileList]
      this.fileList.forEach((file, index) => {
        this.param.append(`file`, file.raw) // 把单个文件重命名，存储起来（给后台）
      })
    },
    uploadChange (file, fileList) {
      // const videoType = ['image/gif', 'image/png', 'image/jpeg', 'video/mp4', 'video/flv', 'video/avi', 'video/rmvb']
      // if (videoType.indexOf(file.raw.type) === -1) {
      //   this.$message.error(`不支持此文件格式${file.raw.type}`)
      //   this.$refs.uploadMul.clearFiles()
      //   return false
      // }
      this.param = new FormData()
      this.fileList = [...fileList]
      this.fileList.forEach((file, index) => {
        this.param.append(`file`, file.raw) // 把单个文件重命名，存储起来（给后台）
      })
    },
    // 超出上传个数时调用
    uploadLimit (files, fileList) {
      this.$message.error(`最多允许同时上传${this.maxUploadSize}个文件!`)
      // files.forEach((file, index) => {
      //   console.log(index)
      // })
    },
    beforeUpload (file) {
    },
    uploadFile (file) {
      // 该方法需存在,防止空action时element-ui报404异常
    },
    clearFiles () {
      this.fileList = []
      this.param = {}
      this.$refs.uploadMul.clearFiles()
    },
    // 初始化表单数据
    init () {
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

后端代码(模拟)

@RequestMapping("/oss/ossUploadObject")
public ApiResponse<FileDto> uploadObject(@RequestParam("file") MultipartFile[] file, FileVo fileVo){
    //...code
    FileDto dto = new FileDto();
    dto.setUrl("");
    dto.setFileId("");
    return ApiResponse.success(FileDto);
}

解决element ui多文件上传的问题

业务场景

在使用vue+elementui 实现文件上传的时候，我发现官网给的组件每次都会自动上传，而且一次上传一个文件。但是我实际的业务是，一次上传多个文件。

解决办法

前端代码：

<template>
  <div>
<!--    文件上传组件-->
<!--      :auto-upload="false" 这里设置为不自动上传 ，所以:action="BASE_API+'/upload'“ 失效-->
  <el-upload
    name="files"
    class="upload-demo"
    :on-change="OnChange"
    :multiple="true"

    :action="BASE_API+'/upload'"
    :on-preview="handlePreview"
    :before-remove="beforeRemove"
    :file-list="list"
    :auto-upload="false"
    list-type="picture">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  <el-button type="" @click="fun">点击查看filelist</el-button>
  <el-button type="" @click="onSubmit">提交</el-button>
  </div>

</template>

<script>
  import upload from "@/api/upload"
  import request from "@/utils/request"

  export default {
    data() {
      return {
        param: new FormData(),
        form:{},
        count:0,
        list:[],
        dialogVisible:false,
        dialogImageUrl:'',
        BASE_API: process.env.BASE_API, // 接口API地址
      };
    },
    methods: {
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      OnChange(file,fileList){

        console.log(fileList)
        this.list=fileList

      },
      OnRemove(file,fileList){
        this.list=fileList
      },
      fun(){
        console.log('------------------------')
        console.log(this.list)
      },
      onSubmit(){

        // this.form={
        //   a:1,
        //   b:2,
        //   c:3
        // }
        // let file=''
        // for(let x in this.form){
        //   this.param.append(x,this.form[x])
        // }
        // for(let i=0;i<this.list.length;i++){
        //    const file='file'+this.count
        //   this.count++
        //   this.param.append(file,this.list[i].raw)
        // }
        // console.log(this.param)

        console.log(this.list[0])

        let formData = new FormData();
        let file1 = this.list[0]
        let file2 = this.list[1]
        console.log(file1)
        console.log(file2)
        // 这里必须是 .raw 不然后端springboot multipart 获取到的文件为 null
        // 单个文件的话 后端接口写 Multipart file
        // 多个文件的话 后端接口写 Multipart [] files
        // 文件名需要对应
        formData.append('files', file1.raw);
        formData.append('files', file2.raw);
        // formData.append('name', 'zhangsan');
        // formData.append('files[]', file2);

        request.post('/upload',formData,{
          headers: {
            'Content-Type': 'multipart/form-data'
          }}).then(res=>{
          console.log(res)
        })

        // request.post('/testabc?name='+formData.get("name")).then(res=>{
        //   console.log(res)
        // })

        // upload.uploadfile(formData).then(res=>{
        //   console.log(res)
        // })
        // batchTagInfo(this.param)
        //   .then(res=>{
        //     alert(res)
        //   })
      }
    }
  }
</script>

<style scoped>
</style>

后端接口代码：

package com.yj.wiki.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@CrossOrigin
public class UploadFileController {

    @PostMapping("/upload")
    public String upload(MultipartFile[] files){

        for (MultipartFile file : files) {
            System.out.println(file.getOriginalFilename());

        }

        return "ok";
    }

    @PostMapping("/testabc")
    public String upload(String name){

        System.out.println(name    );

        return "ok";
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。