Alicloud OSS signature upload (combined with elementui)

Time:2021-6-16

Principle: get the signature from the server and upload it to the Alibaba cloud OSS server directly.

file:

Elementui main code

template:

< El form item label = "upload picture" prop = "video" >
    <el-upload id="video"  action
        :data="aliyunOssToken"
        :http-request="uploadVideo"
        :headers="header">
        <img v-if="form.cover" :src="form.cover">
        < El button class = "Avatar uploader icon" type = "primary" > upload < / El button >
    </el-upload>
</el-form-item>

script:

upload(file){
    var _self = this;
    let imgType = file.file.type.split("/")[1].toLowerCase();
    if (imgType != 'jpg' && imgType != 'png') {
        This. $message. Error ('Please upload image type ');
        return;
    }
    getOSSToken().then(function(res){
        _self.aliyunOssToken = res.data;
        var ossData = {};
        //Key represents the file level and the file name on alicloud
        let imgType = file.file.type.split("/")[1];
        let filename = file.file.name + file.file.size; // MD5 encrypts the image name
        let keyValue = "images/" + md5(new Date() + filename) + "." + imgType;

        //Assemble formdata
        let formdata = new FormData();
        formdata.append('name', file.file.name)
        formdata.append('key', keyValue)
        formdata.append('policy', _self.aliyunOssToken.policy)
        formdata.append('OSSAccessKeyId', _self.aliyunOssToken.accessid)
        formdata.append('success_action_status', 200)
        formdata.append('signature', _self.aliyunOssToken.signature)
        formdata.append('file', file.file)

        _self.uploadOSS(formdata, _self.aliyunOssToken.host).then(function(res){
            _self.form.cover = _self.aliyunOssToken.host + '/' + keyValue;
            _ Self. $message. Success ('upload succeeded ');
        }).catch(function(error){
            _ Self. $message. Error ('upload failed ');
            console.log(error);
        })
    }).catch(function(error){
        console.log(error);
    })
},
uploadOSS(formData, url) {
  const config = {
    headers: { "Content-Type": "multipart/form-data;boundary="+new Date().getTime() }
    };
  return axios.post(url,formData,config);
}

Among them: be sure to use the form submission method. The format of aliyunosstoken is as follows

{
    "accessid": "LToofXWKudxfoAlI",
    "host": "https:\/\/xxx.oss-cn-hangzhou.aliyuncs.com",
    "policy": "eyJleHBpgfdgdf676uIjoiQxODowNzowMFoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC17ewreMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInZpZGVvXC8iXV19",
    "signature": "H46g4345VIvRhrsMa44546&",
    "expire": 1578478020,
    "dir": "images\/"
}

Remember to set Alibaba cloud OSS cross domain rules (it is not recommended to use *, it is recommended to set your own accessible domain name)

Alicloud OSS signature upload (combined with elementui)

This work adoptsCC agreementReprint must indicate the author and the link of this article

Before the collection, you may as well order a like to try!!!

Recommended Today

Monkey patch monkey patch programming method and its application in Ruby

What ismonkey patch (Monkey Patch)? In a dynamic language, functions are added and changed without modifying the source code. Purpose of using monkey patch:1. Additional function2. Function change3. Fix program errors4. Add a hook to execute some other processing while executing a method, such as printing logs, realizing AOP, etc,5. Cache, when the amount of […]