快捷導(dǎo)航

elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)

更新時(shí)間：2023年03月08日 11:43:27 作者：coderYYY

upload上傳是前端開發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下

Element Upload 上傳

Element Upload官方文檔：el-upload

具體細(xì)節(jié)只看官方文檔，本篇主要介紹避坑點(diǎn)和用法總結(jié)

注意點(diǎn)以及坑

本地上傳想要回顯圖片視頻，使用on-success是沒辦法再在上傳后獲取到本地文件路徑后進(jìn)行回顯的，因?yàn)橹挥性谏蟼鞯?code>action成功，即不報(bào)錯(cuò)的情況下才會(huì)調(diào)用，本地上傳用的action="#這個(gè)接口不存在，所以也不會(huì)上傳成功，更不會(huì)調(diào)用獲取到文件參數(shù)進(jìn)行回顯

如果想要先在本地進(jìn)行回顯，然后再上傳的話，需要使用on-change鉤子（還需:auto-upload ="false"）獲取文件本地路徑，再生成一個(gè)formData傳給后端上傳文件的接口，

本地回顯用on-change，上傳到服務(wù)器的回顯用on-success

官方文檔中提供的上傳圖片接口https://jsonplaceholder.typicode.com/posts/現(xiàn)已無法使用

下面給大家總結(jié)幾種常用的上傳文件方法：

el-upload上傳文件用法總結(jié)

1. 上傳單張圖片到服務(wù)器并進(jìn)行回顯，不可刪除只能替換

這種上傳單張圖片的運(yùn)行場景一般是上傳頭像，沒有刪除功能，只能進(jìn)行替換

<el-upload
  class="avatar-uploader"
  action="后端上傳接口"
  :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>

<style>
 /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      // 上傳成功后的回顯
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      // 上傳前對類型大小的驗(yàn)證
      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>

2. 拖拽上傳單張圖片到本地回顯再上傳到服務(wù)器，可刪除

可以手動(dòng)上傳，也可以拖拽上傳，圖片可以在沒有后端上傳接口時(shí)進(jìn)行回顯，可刪除
template:

<el-upload
          drag
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="uploadFile"
          accept="image/jpg,image/jpeg,image/png"
        >
          <i
            v-if="imageUrl1"
            class="el-icon-circle-close deleteImg"
            @click.stop="handleRemove1"
          ></i>
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />

          <div v-else>
            <i
              class="el-icon-picture"
              style="margin-top: 40px; font-size: 40px; color: #999a9c"
            ></i>
            <div class="el-upload__text1">上傳圖片</div>
            <div class="el-upload__text">* 建議尺寸比例2.2:1，不超過4m，</div>
            <div class="el-upload__text">格式為png、jpeg或jpg</div>
          </div>
        </el-upload>
<style scoped>
.deleteImg {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>

data:

 data() {
      return {
        imageUrl1: ''
      };
    },

method:

 uploadFile(item) {
      console.log(item);

      let formData = new FormData();
      let file = item.raw;
      this.imageUrl1 = URL.createObjectURL(file);
      formData.append("file", file);
      // 傳formData給后臺(tái)就行
      // 比如
      // 接口(formData).then(res=>{
          // this.videoUrl=res.url
      // })
    },
    // 刪除只需清空imageUrl1即可
   handleRemove1(file, fileList) {
      // console.log(file, fileList);
      this.imageUrl1 = "";
    },

3. 多圖上傳到服務(wù)器，可回顯預(yù)覽刪除

list-type="picture-card"hover會(huì)自動(dòng)有預(yù)覽刪除菜單，不需自己寫樣式，綁定事件即可

<el-upload
  action="后端接口地址"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>