vue如何實(shí)現(xiàn)文件上傳

本篇內(nèi)容主要講解“vue如何實(shí)現(xiàn)文件上傳”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue如何實(shí)現(xiàn)文件上傳”吧!

1、使用elementUI的 el-upload插件進(jìn)行上傳。

html:

<el-upload
          ref="avatar-uploader"
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          action
          :on-change="handleChange"
        >
          <img v-if="AddSubmenuData.imageUrl" :src="AddSubmenuData.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

js:

data() {
      return {
        AddSubmenuData:{
          id:"",
          pid:"",
          funType:1,
          name:"",
          sort:"",
          SystemCoding:"",
          remarks:"",
          imageUrl: ''
        },
      };
  },
  methods: {
      // 獲取圖片信息并轉(zhuǎn)成base64
      handleChange(file, fileList){
       let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file.raw);
        reader.onload = function() {
          fileResult = reader.result;
        };
        reader.onloadend = function() {
           this.AddSubmenuData.imageUrl = fileResult
        };
      }
  }

css:

 /deep/  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin-left: 80px;
      margin-bottom: 22px;
    }
    .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;
    }

效果圖：

2、使用input進(jìn)行上傳。

1)、html

首先input的type屬性要改成file，如果需求是點(diǎn)擊按鈕在上傳文件。可以給input加一個(gè)ref=“fileInput”，然后通過(guò)點(diǎn)擊按鈕調(diào)用input的事件:@click="$refs.fileInput.click()".

<div class="el-button--primary el-button" @click="$refs.fileInput.click()">
   <input type="file" ref="fileInput" accept="*" @change="getFile" >
   <img src="../../assets/Infrastructure/xz.png" />添加
</div>

2)、js

獲取文件后就可以進(jìn)行數(shù)據(jù)處理并調(diào)用接口。因?yàn)橛行r(shí)候，上傳文件有些是重復(fù)的，再次調(diào)用方法就是失效，所以，可以在每次上傳完之后清除之前上傳的文件，這樣即使文件相同，也可以重復(fù)調(diào)用方法。this.$refs.fileInput.value=’’

// 獲取文件數(shù)據(jù)
  getFile(event) {
//這就是你上傳的文件
       event.target.files[0]
       
       let formFile = new FormData();
        formFile.append("file", event.target.files[0]);
        formFile.append("apply_info_id", this.RndNum(12));
        formFile.append("file_type", '');
        //調(diào)用接口
        file_upload(formFile).then(res => {
          this.addInformation.addPoupTableData.data.push({name:res.data.name,id:res.data.id,size:(event.target.files[0].size/1024).toFixed(0) + "kb",path:res.data.path})
          //調(diào)用接口后清除文件
          this.$refs.fileInput.value=''
        })
 },

到此，相信大家對(duì)“vue如何實(shí)現(xiàn)文件上傳”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！