VUE+Element-ui(el-upload) 上传图片/文件

泡泡日积月累第一篇！

1、文件上传时携带参数

文件上传时,想要在上传的时候携带参数，可直接使用：

:data={参数} ,参数为键值对的形式{key1:value1,key2:value2}

<el-upload
	:data={pid:this.pid}
	>
</el-upload>

2、upload

• open: 是否显示弹出层，该属性的值为布尔型，false表示不显示，true表示显示。
• title: 弹出层标题，该属性的值为字符串类型。
• updateSupport: 是否更新已经存在的用户数据，该属性的值为整型。若为0，则不更新；若为1，则更新。
• headers: 设置上传的请求头部，该属性的值为一个对象类型，包含了一个Authorization属性，在请求头部中将会添加Authorization属性的值为"Bearer "加上getToken()方法的返回值，此处的返回值就是token（根据自己需求改！）。
• url: 上传的地址，该属性的值为一个字符串类型，值process.env.VUE_APP_BASE_API + "/api/common/upload"。
• 其中，process.env.VUE_APP_BASE_API是一个环境变量，其值在不同的环境中可能会有所不同，表示应用程序的基本API地址。

<el-upload
          :headers="upload.headers"
          :action="upload.url"
          :on-success="handleFileSuccess"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="completionPhotoList"
          :on-change="changeFile"
        >
        <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
   <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<script>
export default {
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/api/common/upload",
      },
 } 
}

3、before-remove来阻止文件被删除的操作

<el-upload
  :before-remove="beforeRemove"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    }
  }
</script>

 4、multiple、limit、on-exceed属性

 给控件加了multiple属性，就表示可以多选；

 通过limit设置多选的个数限制，当不需要多选（只想单选文件）时，不加multiple属性；

 可多选，无个数限制，不设置limit这个属性即可；

 on-exceed：超出限制时会调用此方法；

超出三个文件给予提示信息，如图：

<el-upload
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
    }
  }
</script>

5、before-upload属性以及on-success属性

注意auto-upload属性的坑：:auto-upload="false"时，before-upload 不起作用；

为啥？

before-upload: 文件上传之前触发，指当文件已经被选中，提交时才会触发此事件
auto-upload：设置为false时，选中文件不会触发上传事件

解决方法：

将before-upload里面要写的内容放到on-change事件中去实现

:auto-upload="false"设置为true

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>