天天看點

vue2.0-element ui 實作圖檔自動上傳功能;

問題:一直顯示token不存在?原因是沒有設定請求頭,是以要設定headers.

一、上傳代碼:

<el-upload
          class="avatar-uploader"
          action="http://43.128.40.9:8089/addssmin/fisdle/upload" //填寫接口請求位址
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers" //請求頭
        >
          <i class="el-icon-plus avatar-uploader-icon"></i> 
          <!-- <img v-if="detailForm.imageUrl" :src="detailForm.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
      

 二、js部分:

data(){
    return{
        headers:{"token": localStorage.getItem("token")}//本地擷取
       
        },
},
methods:{
   handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log("上傳圖檔成功",res,file)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        console.log("beforeAvatarUpload",file)
        // if (!isJPG) {
        //   this.$message.error('上傳頭像圖檔隻能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上傳頭像圖檔大小不能超過 2MB!');
        // }
        // return isJPG && isLt2M;
      }
}    
      

  

從啥也不會開始吧