element-ui多文件上传-版本2.13.0

vue 多文件上传

在这里我来介绍一下，如何用vue 的 element-ui组件批量上传文件。这个官方文档上没有直接的参考案例，我是通过在网上看了好多文章终结出来的，希望有遇到和我相同问题的朋友能少走弯路。

官方手册

链接: element-ui文件上传手册

通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

下为案例图

<div style="margin-top:-15px">
<el-form-item label="" prop="content">
//el-upload 我这里是自动提交，先是一张一张的自动上传到图片云服务器，然后通过获取返回值列表在统一提交到后台服务器保存
<el-upload
  class="upload-demo"
   action="/index.php/Admin/Tools/fileupload"   //这个是图片上传地址 后台默认接收是 file  
  :on-preview="handlePreview"  //点击文件列表中已上传的文件时会触发 handlePreview 方法
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :before-remove="beforeRemove" 
  multiple        //是否支持多选文件
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>

	<!-- 点击事件按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="on_submit">立即提交</el-button>
        <el-button style="margin-left:20px" @click="$emit('submit_close')">取消</el-button>
      </el-form-item>

</div>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],  //已上传的文件的默认值，我想一般用不到
        list:[],      //定义保存上传数据的 list
        form: { 	  //设置form表单的参数 默认为空
          publisher_id: null,
          lecture_id: this.lecture_id,
          type: 'text',
          content: null
        },
        pictureContent:null
      };
    }, computed: {
      //验证规则
      rules() {
        let _rules = {
          publisher_id: [{required: true, message: '请选择发送人', trigger: 'change'}],
          content: [{required: true, message: '图片不能为空', trigger: 'blur'}]
        }
        return _rules
      }
    },
    methods: {
      handleRemove(file,fileList) {  //在这里我强调一下 fileList 和上面的 :file-list="fileList" 没关系
        console.log(file, fileList);
        this.list=fileList;
      },//图片上传成功 
      handleSuccess(response,file,fileList) { //file 是刚刚完成上传的图片信息，fileList 是所有完成上传的图片信息列表
        if (response.code === API_SUCCESS) {
        	this.list=fileList;
          this.pictureContent = response.data.url  //调用 pictureContent 设置 content 参数; 设置这个是为了通过验证
        }
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    },onSubmit(){
        this.$refs.form.validate((valid) => { //点击提交先验证表单
          if (valid) {
            let _self = this
            
             _self.form.content=this.list; // 把上传好的的图片参数列表赋值给 content
            _self.$http.post('/index.php/Admin/Lectures/uploda_msg', _self.form)
              .then(({data:{data, code, msg}}) => {
                _self.$message({
                  message: msg,
                  type: 'success'
                })
              })
          } else {
            return false
          }
        })
      },watch: {
      pictureContent(val){
        this.form['content'] = val  //注意:如果有验证的话这个地方很重要(当图片发生改变时form.content为空的话无法通过验证。这个地方当文本框发生任何变化都会触发)
      },
    }
  }
</script>