el-upload上传图片

el-upload是element提供的上传图片组件，在实际项目中如何应用，这里有个我自己的示例：

<!-- 上传图片 -->
        <el-form-item label="封面图片：" prop="excelFile">
          <img :src="form.imgUrl" alt="" v-if="!isAdd" style="width:100%">
          <el-upload
            class="upload-demo"
            action
            :auto-upload='false'
            :headers="{'Content-Type': 'multipart/form-data'}"
            :on-error="uploadFalse"
            :on-success="uploadSuccess"
            :on-change="uploadChangeFile"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :limit="1"
            list-type="picture"
          >
            <el-button size="small" type="primary">{{this.isAdd ? '点击上传': '点击覆盖当前图片'}}</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

1.在官网中有说明action的用法，如果直接上传需要在action后面加上上传的地址，但是这里做的是点击上传按钮再调用接口，所以不需要将接口地址放在action后面；

2.auto-upload是否自动上传，不传值则默认为true自动上传；

3.headers有很多参数，这里是在请求头里设置了上传的文件格式为form-data;

4.on-error和on-success分别是上传失败和成功的回调函数；on-change是在上传图片的状态发生改变时调用，无论成功还是失败都会调用

5.limit是用来显示上传文件的数量

// 上传图片
    uploadChangeFile(file){
      this.isClickSubmit = true;   //当图片上传完毕之后才能点击确定按钮
      let myFile = file.raw;
      let formData = new FormData();
      formData.append('file',myFile);
      carouslmap.uploadFile(formData).then(res => {
        const code = res.data.code;
        if(code === 100){
          this.form.imgUrl = res.data.data.downloadUrl;
        }else{
          this.$message.error(res.data.msg);
        }
        this.isClickSubmit = false;
      }).catch(err => {
        console.log(err)
      })
    },

这个组件主要是把官方文档的参数和回调理解清楚就能实际运用。

如有问题，欢迎留言！！

————————————————分割线————————————————

今天又做到了表单中上传图片，记录一下遇到的问题

在每次新增或者编辑时二次上传图片无反应，limit设置为1，是因为每次操作完未清除文件列表导致再次无法上传；

部分代码展示

<el-form-item label="原图" v-show="title == '编辑'">
    <img :src="form.img" alt="" style="height:200px;">
</el-form-item>
 <el-form-item :label="title == '新增' ? '上传图片' : '更新图片'">
     <el-upload
        class="avatar-uploader"
        action="http://admin-test-api.miracle.sale/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :fileList="fileList"
        :limit="1">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 50px;height: 50px;">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

handleAvatarSuccess(res, file) {
   this.currentRaw = file.raw;
   this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
   const isLt2M = file.size / 1024 / 1024 < 3;

   if (!isJPG) {
      this.$message.error('上传头像图片只能是 JPG 格式!');
    }
   if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 3MB!');
   }
    return isJPG && isLt2M;
},
 submit2(){
    if(this.currentRaw){
      let file = new FormData();
      file.append('file', this.currentRaw);
      uploadImg(file).then(res0 => {
         let { code, data, message } = res0;
         if (code == 200) {
            this.form.img = data;
         if (this.title == "新增") {
           //新增操作
         } else {
           //编辑操作
    }else{
      if(this.title == '新增'){
         this.$message.error('请上传图片')
      }else{
         //编辑操作
      }
    }
 },
 closeDialog(){
    this.dialog = false;
    this.currentRaw = null;
    this.imageUrl = '';
    this.fileList = [];   //关闭弹框之后一定要清除文件列表，否在再次上传无反应（limit=1的情况）
 },