vue+element-ui图片上传

a濯

已于 2023-05-26 14:42:20 修改

阅读量110

点赞数

文章标签： vue.js ui javascript

于 2023-05-24 09:55:59 首次发布

本文链接：https://blog.csdn.net/qq_46738283/article/details/130840768

版权

在Vue应用中，使用el-upload组件进行图片上传时，从cookies获取token并添加到headers中以避免401错误。然而，尽管调用了getToken函数，仍遇到授权失败的问题。文章讨论了watermarkupload的API地址，以及fileOnRemove和fileOnChange方法用于图片管理，同时展示了预览图片的dialog组件的使用。

摘要由CSDN通过智能技术生成

 <div>

                        <el-upload :multiple="false"

                        :action="watermarkupload"

                        list-type="picture-card"

                         auto-upload:false

                         :headers="headers"

                          :on-preview="handlePreview"

                          :on-change="fileOnChange"

                           :on-remove="fileOnRemove">

                          <i slot="default" class="el-icon-plus"></i>

                          <div slot="tip" class="el-upload__tip">

                            只能上传jpg/png文件，且不超过500kb

                          </div>

                        </el-upload>

                        <el-dialog :visible.sync="dialogVisible">

                          <img width="100%" :src="dialogImageUrl" alt="" />

                        </el-dialog>

 </div>

需要headers，得到token，开始直接从cookies获得了token放到headers中，一直报401：

import { getToken } from "@/utils/auth";

 watermarkupload: process.env.VUE_APP_BASE_API + "/system/oss/file/upload",//水印上传地址
      headers: {
        // Authorization:"Bearer"+this.token
        Authorization: "Bearer " + getToken(),
      },

// 上传图片放大和删除
    
    fileOnRemove(file, fileList) {
      this.fileList = fileList;
    },
    fileOnChange(file, fileList) {
      this.fileList = fileList;
    },

    handlePreview(file) {
      // console.log(file, "点击放大");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }