vue問題三：element ui的upload組件上傳圖片成功和移除事件

element ui的upload組件上傳圖片成功和移除事件：

登陸後獲取到後臺傳的token存到中：

sessionStorage.setItem("token",data.obj.token);

用getItem取出：

sessionStorage.getItem('token')

<div class="addImg">
          <el-upload
            ref="upload"
            class="wid"
            :action="upimg"
            list-type="picture"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-error="errorimg"
            :on-success="handleSuccess"
            :headers="headers"
            :before-upload="brforeimg"
            :limit="1"
            :on-exceed="exceed"
          >
            <el-button size="small" type="primary" >添加圖片</el-button>
          </el-upload>
</div>







<script>
  export default {
  data() {
        return {
 upimg:'http://47.106.198.122/api/CanteenAdmin/CanteenManagement/UploadImage',
        // 新增上傳圖片
        dialogImageUrl: '',
        images:[
          {url:''}
        ],
        }
    }，
//在上傳圖片前獲取token，前提是已經存到sessionStorage中
 computed:{
    headers(){
      return {
        'token':sessionStorage.getItem('token')
      }
    }
    },
methods: {
//移除圖片時調用
 handleRemove(file, fileList) {
        console.log(file, fileList);
        this.images[0].url='';
      },
      errorimg(res){
        this.$message({
          message:res.msg,
          type: 'warning'
        });
      },
//上傳時調用
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
// 上傳成功時調用
      handleSuccess(response){
        // alert("DFSD")
        this.addform.foodpic= response.data[0]
        console.log(this.addform.foodpic)
       
      },
//上傳圖片前調用
      brforeimg(file){
        let token=sessionStorage.getItem('token');
        console.log(sessionStorage.getItem('token'))
      },

      // 超出上傳個數時調用
      exceed(){
        this.$message({
          message: "只能選擇一個圖片",
          type: 'warning'
        });
      },
    }
}
</script>

View Code

 喜歡的給個贊吧！！！