oss 前端授权上传 elementui
oss 前端授权上传 elementui
<el-form-item :label="$t('file.up')" prop="url">
<el-upload ref="fileUpload"
class="upload-demo"
action=""
:http-request="uploadFile"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
接口获取签名信息
uploadFile(param){
let file = param.file
console.log(file)
getUploadToken(null).then(data => {
let ossUrl = data.host
let accessUrl = data.dir + file.name;
this.form.fileName = file.name;
this.form.fileType = file.type;
this.form.fileSize = file.size;
console.log(accessUrl)
let sendData=new FormData()
sendData.append('OSSAccessKeyId',data.accessid)
sendData.append('policy',data.policy)
sendData.append('signature',data.signature)
sendData.append('keys',data.dir)
sendData.append('key',accessUrl);
sendData.append('success_action_status',200)
//sendData.append( 'type','image/jpeg')
sendData.append('file',file)
axios.post(ossUrl,sendData).then(()=>{
this.form.url = ossUrl +'/'+ accessUrl;
})
})
}
提交 url 给后端 保存就行
elk
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异