vue中element的上传图片功能

1.上传单张图片

<el-form-item label="上传照片" prop="avatar">
    <el-upload 
        class="avatar-uploader" 
        action="" 
        :show-file-list="false" 
        :before-upload="beforeUpload"
    >
        <img v-if="form.avatar" :src="form.avatar" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11

beforeUpload(file) {
    const isJPG = file.type === "image/jpeg" || file.type == "image/png";
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
    }
    if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
    }
    const fileData = new FormData();
    fileData.append("avatar", file);
    //upload为上传的接口
    upload(fileData).then(res => {
        this.imgUrl = res.imgUrl;
        //对返回的图片地址进行回显
        this.$set(this.form, "avatar", this.imgUrl);
    });
    //阻止传到本地浏览器
    return false;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

action表示必选参数，上传的地址，虽然是必传，但有些情况后端不支持这么做，要我们以某种形式传到服务器，那么我们只能在action中传入空字符串。然后在beforeUpload函数中传取数据给服务器，根据服务器返回的地址进行回显。
发现在上传过程中会传两遍，有一遍是传到本地的localhost的，我们需要在beforeUpload最后加上return false来阻止浏览器的默认行为。

2.上传多张图片

<el-form-item label="上传图片" prop="images">
    <el-upload
      action=""
      :limit="3"
      list-type="picture-card"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :file-list="fileList"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13

list-type="picture-card"表示以下面这种方式展示图片
beforeUpload函数同上传单张图片一样的逻辑
filelist这个数组里存放的是上传的图片，它们会依次排放展示，不要自己再v-for循环遍历出来
建议在弹框中完成上传多张图片的逻辑

//删除
handleRemove(file) {
  this.fileList = this.fileList.filter(item => item.uid !== file.uid);
},
handleExceed() {
  this.msgError("最多只能传3张照片");
}
1
2
3
4
5
6
7