element上传图片的方法

上传图片的方法
1直接后端返回上传图片的服务器地址，使用element的action属性可以直接上传到服务器，之后后端负责上传阿里云
2客户端直传两种方式
客户端签名直传
首先调取接口获取oss配置 包括 accesskeyid accesskeysecret bucket服务器名称 host 服务器地址 之后使用 new oss 并使用multipartUpload 上传你的图片到阿里云 但是这种方法会暴露你的oss服务器的secret 一般不使用

服务端签名直传
这种方法是客户端向服务端发送上传i请求，服务端生成一个policy 你在前端配置policy来进行上传图片
通过axios直接上传到阿里云 （上传表单）

介绍这种方法
首先上传前获取阿里云配置

            getOssData() {
                this.$fetch.api_home.getOssData()
                    .then(data=>{
                        this.accessKeyId= data.accessid; //ak
                        this.policy = data.policy;  //secret
                        this.region = data.host;  //  上传地址
                        this.dir = data.dir;  //上传路径
                        this.callback = data.callback;  //回调函数
                        this.signature = data.signature;  //
                    })
                    .catch(err=>{
                        this.$message.error(err)
                    })
            },

upload组件绑定的事件

						<el-upload
                                class="avatar-uploader"
                                action
                                :http-request="uploadAddImg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="form.pictureurl" :src="form.pictureurl" class="avatarUpload" style="width: 150px;height: 150px;" @click="getOssData()">
                            <i v-else class="el-icon-plus avatar-uploader-icon" @click="getOssData()"></i>
                        </el-upload>

注意绑定的事件http-request 用于自定义上传
官方给的介绍

            async uploadAddImg(option) {
                // try/catch异常捕获  当try中的报错误的时候，执行catch里面的代码，try下面的代码不再执行
                // 通过throw自动抛出的错误不会被catch捕获
                try {
                    //对获取到的oss配置文件进行数据处理
                    let file = option.file;
                    let fileName = file.name;
                    var name = fileName.split(".")[1];
                    // 获取OSS配置信息
                    var formData = new FormData();
                    var timestamp = (new Date()).valueOf();
                    var result = `${timestamp}.${name}`;
                    formData.append('key', `${this.dir}${result}`);   // 文件名字，可设置路径
                    formData.append('OSSAccessKeyId', this.accessKeyId);  // Bucket 拥有者的Access Key Id
                    formData.append('policy', this.policy);  // policy规定了请求的表单域的合法性
                    // 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
                    formData.append('signature', this.signature);   //签名
                    formData.append('success_action_status', 201);   // 成功时让服务端返回200,不然，默认会返回204
                    formData.append('file', file);   // 需要上传的文件filer
                    formData.append('callback', this.callback);
                    axios.post(this.region, formData, {
                        headers: { 'Content-Type': 'multipart/form-data' }
                    })
                        .then((res) => {
                            if (res.status === 201){
                                let url = this.region + "/" + this.dir + result;
                      
                                // let arr = url.split("/");
                                //获取到在线地址后，将图片名称赋给form。地址一份给form一份给imageUrl1.
                                this.form.pictureurl = url;
                            }
                        })
                        .catch((err) => {
                            this.$message.error("请求错误")
                        });
                } catch (error) {
                    this.$message.error("try报错");
                    option.onError("上传失败");
                }
            },