©2020-2024 ioDraw All rights reserved
<> Background
The project is written in vue+element Built , Want to achieve a picture upload function , Alicloud server exists . I read the Alibaba cloud documents in the background , Think the client direct transmission is the most appropriate solution . The process is that the client selects the file and asks for the signature from the back end , And then to Alibaba cloud .
<> design sketch
<> code implementation
<el-upload :action="addressOss" list-type="picture-card" ref="upload"
:before-upload="upload" :data="dataOss" :on-success="uploadSuccess"
:on-error="uploadError" > <i class="el-icon-plus"></i> </el-upload> <el-dialog
:visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
It's normal element assembly , Mainly used to upload a few hook function , Before uploading before-upload, Upload succeeded on-success, Upload failed on-success, And upload address action, Upload additional parameters data. Next, let's look at the corresponding function .
After selecting a picture , Functions executed before uploading
async upload(file) { let fileName =
"devicesource"+file.uid+file.name;// file name , Agreement with the backstage let reponse = await
this.$store.dispatch({ type:'device/Sign', data:{ fileName:fileName } })// Ask for signature
this.addressOss = reponse.data.result.host;// Upload address this.dataOss = {
key:reponse.data.result.key, ossAccessKeyId:reponse.data.result.ossAccessKeyId,
policy:reponse.data.result.policy, signature:reponse.data.result.signature,
callback:reponse.data.result.callback, };// Upload additional parameters }
Processing function after upload failure and success
uploadError(err, file, fileList){ this.$message.error(' Picture upload failed !'); }
uploadSuccess(err, file, fileList){ this.$message.success(' Picture uploaded successfully !');
this.photos.push(this.addressOss+""+this.dataOss.key) }
End of picture upload .
<> summary
Because of the background interface constraints , My side is a picture, a picture upload , But that's the general idea , I hope I can help you !
Technology