后端需要令牌才可以有权限,怎么用ElementPlus携带令牌手动实现上传文件的请求?

在这里插入图片描述

vue代码如下:

    <el-form-item label="头像" :label-width="labelWidth">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
        
              :http-request="uploadRequest"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="uploadImage" :src="uploadImage" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

ts代码如下:

             /**
         *  请求上传
         *  
         */
        const uploadRequest: UploadProps['httpRequest'] = (options: UploadRequestOptions) => {
    
    
            console.log(options, "请求选项");
            let token = loginEmpStore().getLoginInfo().token;
            return axios.post("/api/upload", options, {
    
    
                headers: {
    
    
                    'Content-Type': 'multipart/form-data',
                    token,
                },
            }).then(response => {
    
    
                uploadImage = response.data.data; 
            }).catch(error => {
    
    
               console.log(error);
               
            });

        }

        /**
         *    上传之前
         * @param rawFile 
         * @returns 
         */
        const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    
    
            if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    
    
                ElMessage.error('图片必须是jpeg或png!')
                return false
            } else if (rawFile.size / 1024 / 1024 > 10) {
    
    
                ElMessage.error('必须低于10MB!')
                return false
            }
            return true
        }

猜你喜欢

转载自blog.csdn.net/pursuedream6/article/details/139153913