目錄

• 一、基本使用
• 二、圖片數量控制
• 三、圖片格式限制/可以選中多張圖片
• 補充：在專案中使用element-ui的Upload上傳元件

一、基本使用

最近研究了一下 el-upload元件 踩了一些小坑 寫起來大家學習一下

很經常的一件事情 經常會去直接拷貝 element的的元件去使用 但是用到上傳元件時 就會遇到坑了

如果你直接去使用upload 你肯定會遇見這個錯誤

而且 上傳的圖片 可能會突然消失 這時候如果你沒有介面 你是完全不知道為什麼移除的 所以 無介面時 只能去猜測是不是因為跨域報錯 導致圖片消失

最終去拿公司的地址調完介面，答案是對的action="https://onplaceholder.typicode.com/posts/" 這是element中的action引數 用html 時 他會去呼叫ajax 使同源策略不同導致報錯。

一般呢公司都會提供一個 轉圖片為url格式的地址連結 你只需要去呼叫它 儲存下來就好了， 但是可能會遇到需要token 許可權 ，這時候很少去做的事情來了，一般沒有去直接通過元件帶token，所以要通過 el-upload元件去攜帶token

 <el-upload
            action="https://xxxx地址"
            :headers="importHeaders"
          >
   </el-upload>
 
import {getToken} from '@/utils/token'
 
 
data() {
    return {
      importHeaders: {token: getToken()},};
  },

二、圖片數量控制

 <el-upload
            action="https://security.brofirst.cn/api/common/upload"
            :headers="importHeaders"
            :limit="limit"
             :on-exceed="masterFileMax"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
 
 
 
  // 最多上傳幾張圖片
    masterFileMax(files,fileList) {
        console.log(files,fileList);
        this.$message.warning(`請最多上傳 ${this.limit} 個檔案。`);
    },

三、圖片格式限制/可以選中多張圖片

  <el-upload
             accept=".JPG,.PNG,.JPEG,.jpg,.png,.jpeg"
             multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>

例子

   <el-upload
            action="https://xxxx"
            :headers="importHeaders"
            licwSmAhGDlJst-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :limit="limit"
             :on-exceed="masterFileMax"
             accept=".JPG,.jpeg"
             multiple
          >
            <i class="el-icon-plus"></i>
          </el-upload>
 
 
 
<script>
import {getToken} from '@/utils/token'
export default {
  name:'feedback',data() {
    return {
      importHeaders: {token: getToken()},images:[],limit:9
    };
  },methods: {
  //刪除圖片
    handleRemove(file,fileList) {
     const idx= this.images.findIndex(it=&cwSmAhGDlJgt;it===file.response.data.fullurl)
     this.images.splice(idx,1)
    },handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },// 上傳成功後的資料
    handleAvatarSuccess(response,file,fileList){
      console.log(response,fileList);
      if(response.code===1){
        this.images.push(response.data.fullurl)
      }
    },// 最多上傳幾張圖片
    masterFileMax(files,fileList);
        this.$message.warning(`請最多上傳 ${this.limit} 個檔案。`);
    }
  }
};
</script>

補充：在vue專案中使用element-ui的Upload上傳元件

<el-upload
               v-else
               class='ensure ensureButt'
               :action="importFileUrl"
               :data="upLoadData"
               name="importfile"
               :onError="uploadError"
               :onSuccess="uploadSuccess"
               :beforeUpload="beforeAvatarUpload"
               >
               <el-button size="small" type="primary">確定</el-button>

其中importFileUrl是後臺介面，upLoadData是上傳檔案時要上傳的額外引數，uploadError是上傳檔案失敗時的回掉函式，uploadSuccess是檔案上傳成功時的回掉函式，beforeAvatarUpload是在上傳檔案之前呼叫的函式，我們可以在這裡進行檔案型別的判斷。

data () {
    importFileUrl: 'http:dtc.com/cpy/add',upLoadData: {
        cpyId: '123456',occurTime: '2017-08'
    }
},methods: {
    // 上傳成功後的回撥
    uploadSuccess (response,fileList) {
      console.log('上傳檔案',response)
    },// 上傳錯誤
    uploadError (response,fileList) {
      console.log('上傳失敗，請重試！')
    },// 上傳前對檔案的大小的判斷
 http://www.cppcns.com   beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const extension3 = file.name.split('.')[1] === 'doc'
      const extension4 = file.name.split('.')[1] === 'docx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2 && !extension3 && !extension4) {
        console.log('上傳模板只能是 xls、xlsx、doc、docx 格式!')
      }
      if (!isLt2M) {
        console.log('上傳模板大小不能超過 10MB!')
      }
      return extension || extension2 || extension3 || extension4 && isLt2M
    }
}

到此這篇關於vue使用Element el-upload 元件的文章就介紹到這了,更多相關vue Element el-upload 元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！