el-upload上传文件详解

自动上传

官网中el-upload的自动上传属性默认是true，因此想要实现自动上传配置以下参数即可

• action:必传参数，即放置后端上传文件的接口地址：如http:localhost:8080/upload
• headers:一般上传文件有登入的限制时，可在headers配置token
• mulitiple:可根据实际要求选择true或者false
• data:当上传文件还需要带一些其他参数时需要用到该属性，若没有可以不用配置,如：

   <el-upload
            name="file"
            :action="uploadvideoimg"
            accept="image/jpeg,image/png"
            :show-file-list="false"
            :data="{ uuid: this.imguuid }"
            :headers="headers"
          >
  </el-upload>

• name:若后端接口上传的文件参数为file，即name='file'

• 可配合文件上传成功的钩子on-success，实现图片回显,on-success的函数的response即后端上传接口返回200状态码的内容

•    imguploadSuccess(res) {
        this.videoimgurl = res.data;
      },

   <el-upload
            name="file"
            :action="uploadvideoimg"
            accept="image/jpeg,image/png"
            :show-file-list="false"
            :on-error="imguploadError"
            :on-success="imguploadSuccess"
            :before-upload="imgBeforeUpload"
            :headers="headers"
          >
            <el-button size="small" type="primary" class="upvideoimg"
              >上传视频封面</el-button
            >
          </el-upload>
          <img class="videoimg" :src="videoimgurl" fit="cover" />
  
   data() {
      return {
        videoimgurl:'',
        uploadvideoimg: process.env.VUE_APP_BASE_API + "/photo/uploadPhoto",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      };
  }，
   methods: {
     
      imguploadError() {
        this.$message.error("图片插入失败");
        this.videoimgurl = add;
      },
      //上传成功
      imguploadSuccess(res) {
        //回显图片
        this.videoimgurl = res.data;
      },
      imgBeforeUpload(coverUrl) {
        this.imguuid = this.$uuid.v1();
        const isLt = coverUrl.size / 1024 / 1024 < 5;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 5 MB!`);
          return false;
        }
        return true;
      },
    },

手动上传

• action:必传参数，但是由于是手动上传并不会用这个接口，只是依然需要写一下
• http-request:自定义上传的函数，可通过搭配auto-upload="fasle",ref="uploadImg"来实现手动上传
• 调用this.$refs.uploadImg.submit()时会自动执行自定义函数的上传功能
• 流程：首先点击选择图片的按钮，进行文件选择，选择后由于文件列表发生变化调用uploadImgChange()函数，可通过该函数获取图片的文件并进行Url的转换。在点击确认上传即调用自定义方法uploadImg实现上传文件的功能，若上传成功则会调用on-success的函数uploadImgSuccess，执行成功后对应的操作

         <div class="video-content">
                <h1>视频封面</h1>
                <el-upload
                    name="image"
                    ref="uploadImg"
                    :action="uploadImgUrl"
                    :multiple="false"
                    :show-file-list="false"
                    :on-change="uploadImgChange"
                    :on-success="uploadImgSuccess"
                    :http-request="uploadImg"
                    :auto-upload="false"
                    :limit="1"
                    >
                    <el-button>选择图片</el-button>
                </el-upload>
                <div class="video">
                    <img :src="imgUrl" alt="">
                    <span class="video-msg" v-show="imgUrl==''">精美的封面将会吸引更多人的观看~</span>
                </div>
            </div>
         <el-button @click="submitImg"> 确认上传</el-button>


methods:{
        //选择图片时文件发生变化调用该函数，获取图片的文件并通过URL.createObjectURL(file)获取图片url回显
        uploadImgChange(res){
            this.imgFile = res.raw;
            this.imgUrl =  URL.createObjectURL(res.raw);
        },
        uploadImgSuccess(res){
            console.log("图片上传成功");
            console.log(res);
        },
        //定义上传图片方法
        uploadImg() {
            var formData = new FormData();
            formData.append('videoId',this.videoId);
            formData.append('image',this.imgFile);
            api.uploadImg(formData).then(res => {
                if(res.data.code == 200){
                    this.$message({
                        type:'success',
                        message:'发布成功！'
                    })
                    //清空上传列表
                    this.$refs.uploadImg.clearFiles();
                  
                }else{
                    this.$message({
                        type:'error',
                        message:'发布失败,'+res.data.msg
                    })
                }
            }).catch(err => {
                this.$message({
                        type:'error',
                        message:'发布失败,'+err.data.msg
                    })
            })
        },
        //确认上传的函数
        submitImg(){
  
                //调用手动上传的方法
                this.$refs.uploadImg.submit();
            
        }
}