Element-UI 中 Upload上传组件的action使用问题

尉迟宣
2023-12-01
<el-upload
     class="avatar-uploader"
     v-loading="loading"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
     :action="actionUrl"
     :headers="{ 'Authorization': token }"
     :auto-upload="true"
     :show-file-list="false"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
     <img v-if="userForm.avatarPath" :src="userForm.avatarPath" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

action:上传图片的地址(官方规定必传)

action的接口地址拼接如下:

actionUrl: baseUrl + '/api/users/updateAvatar', // 这是在data里边定义的

还有就是在headers里边添加token值,如下:

:headers="{ 'Authorization': token }" // 在el-upload标签上定义此属性即可
token: localStorage.getItem('token') // data里边定义,这是事先将token存在了Storage里边,现在可以直接获取

 

 类似资料: