oss图片直传阿里

Web端常见的上传方法是用户在浏览器或app端上传文件到应用服务器，然后应用服务器再把文件上传到OSS。就是这样，

和数据直传到OSS相比，以上方法有三个缺点：

• 上传慢。先上传到应用服务器，再上传到OSS，网络传送比直传到OSS多了一倍。如果直传到OSS，不通过应用服务器，速度将大大提升，而且OSS采用BGP带宽，能保证各地各运营商的速度。
• 扩展性差。如果后续用户多了，应用服务器会成为瓶颈。
• 费用高。需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器。

 所以我们今天来实现oss直传阿里云，废话不多说，直接上代码！

安装ali-oss

npm install ali-oss --save

html部分：

    <el-upload
          :action="oss.url"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccessrotation"
          :data="oss.data"
          :before-upload="beforeUploadrotation"
          :multiple="multi"
          :class="rotationhide"
          :limit="10" <!-- 最大上传数量 -->
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

data中声明：

oss: {
        url: "",//签名地址
        data: {
          key: "",
          policy:
            "eyJleHBpcmF0aW9uIjoiMjAzMy0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==",
          OSSAccessKeyId: "LTAI5tF5sntEmuc6LnHyca9W",
          success_action_status: 200, //如果不设置success_action_status为200，文件上传成功后则返回204状态码。
          signature: "wzc0uiYPYHS1k6vcQPE0nqF6WMQ=",
        },
      },
multi: true,
dialogVisible: false,
dialogImageUrl: "",
banner_img: "",

script部分：

export default {
  methods:{
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handleSuccessrotation(res, file, fileList) {
        this.banner_img = this.oss.url + file.uid + "_" + file.name;
    },
    beforeUploadrotation(file) {
        this.oss.data.key = file.uid + "_" + file.name;
    },
  },
}