element UI 上传文件到阿里云对象存储服务

痛定思痛。 2021-07-25 00:00 427阅读 0赞

# 一 element UI 单文件上传组件封装 #

1 singleUpload.vue

<template>
      <div>
        
        <el-upload
          action="http://gulimall-cakin.oss-cn-chengdu.aliyuncs.com"
          :data="dataObj"
          list-type="picture"
          :multiple="false"
          :show-file-list="showFileList"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :on-success="handleUploadSuccess"
          :on-preview="handlePreview"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过10MB
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="fileList[0].url" alt="" />
        </el-dialog>
      </div>
    </template>
    <script>
    import { policy } from "./policy";
    import { getUUID } from "@/utils";
    
    
    export default {
      name: "singleUpload",
      props: {
        value: String,
      },
      computed: {
        imageUrl() {
          return this.value;
        },
        imageName() {
          if (this.value != null && this.value !== "") {
            return this.value.substr(this.value.lastIndexOf("/") + 1);
          } else {
            return null;
          }
        },
        fileList() {
          return [
            {
              name: this.imageName,
              url: this.imageUrl,
            },
          ];
        },
        showFileList: {
          get: function () {
            return (
              this.value !== null && this.value !== "" && this.value !== undefined
            );
          },
          set: function (newValue) {},
        },
      },
      data() {
        return {
          dataObj: {
            policy: "",
            signature: "",
            key: "",
            ossaccessKeyId: "",
            dir: "",
            host: "",
            // callback:'',
          },
          dialogVisible: false,
        };
      },
      methods: {
        emitInput(val) {
          this.$emit("input", val);
        },
        handleRemove(file, fileList) {
          this.emitInput("");
        },
        handlePreview(file) {
          this.dialogVisible = true;
        },
        beforeUpload(file) {
          let _self = this;
          return new Promise((resolve, reject) => {
            policy()
              .then((response) => {
                console.log("响应的数据1", response);
                _self.dataObj.policy = response.data.policy;
                _self.dataObj.signature = response.data.signature;
                _self.dataObj.ossaccessKeyId = response.data.accessid;
                _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                _self.dataObj.dir = response.data.dir;
                _self.dataObj.host = response.data.host;
                console.log("响应的数据2", _self.dataObj);
                resolve(true);
              })
              .catch((err) => {
                reject(false);
              });
          });
        },
        handleUploadSuccess(res, file) {
          console.log("上传成功...");
          this.showFileList = true;
          this.fileList.pop();
          this.fileList.push({
            name: file.name,
            url:
              this.dataObj.host +
              "/" +
              this.dataObj.key.replace("${filename}", file.name),
          });
          this.emitInput(this.fileList[0].url);
        },
      },
    };
    </script>
    <style>
    </style>

2 policy.js

import http from '@/utils/httpRequest.js'
    export function policy() {
       return  new Promise((resolve,reject)=>{
            http({
                url: http.adornUrl("/thirdparty/oss/policy"),
                method: "get",
                params: http.adornParams({})
            }).then(({ data }) => {
                resolve(data);
            })
        });
    }

# 二 单文件上传组件的使用 #

1 brand-add-or-update.vue

<template>
      <el-dialog
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
      >
        
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="140px"
        >
          <el-form-item label="品牌名" prop="name">
            <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
          </el-form-item>
          <el-form-item label="品牌logo地址" prop="logo">
            
            <single-upload v-model="dataForm.logo"></single-upload>
          </el-form-item>
          <el-form-item label="介绍" prop="descript">
            <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
          </el-form-item>
          <el-form-item label="显示状态" prop="showStatus">
            
            <el-switch
              v-model="dataForm.showStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
          <el-form-item label="检索首字母" prop="firstLetter">
            <el-input
              v-model="dataForm.firstLetter"
              placeholder="检索首字母"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      </el-dialog>
    </template>
    
    
    <script>
    /* 导入文件上传组件 */
    import SingleUpload from "@/components/upload/singleUpload";
    export default {
      /* 单文件上传声明为局部组件 */
      components: { SingleUpload },
      data() {
        return {
          visible: false,
          dataForm: {
            brandId: 0,
            name: "",
            logo: "",
            descript: "",
            showStatus: 1,
            firstLetter: "",
            sort: 0,
          },
          dataRule: {
            name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
            logo: [
              { required: true, message: "品牌logo地址不能为空", trigger: "blur" },
            ],
            descript: [
              { required: true, message: "介绍不能为空", trigger: "blur" },
            ],
            showStatus: [
              {
                required: true,
                message: "显示状态[0-不显示；1-显示]不能为空",
                trigger: "blur",
              },
            ],
            firstLetter: [
              {
                validator: (rule, value, callback) => {
                  if (value == "") {
                    callback(new Error("首字母必须填写"));
                  } else if (!/^[a-zA-Z]$/.test(value)) {
                    callback(new Error("首字母必须a-z或者A-Z之间"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            sort: [
              {
                validator: (rule, value, callback) => {
                  if (value == "") {
                    callback(new Error("排序字段必须填写"));
                  } else if (!Number.isInteger(value) || value < 0) {
                    callback(new Error("排序必须是一个大于等于0的整数"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
        };
      },
      methods: {
        init(id) {
          this.dataForm.brandId = id || 0;
          this.visible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
            if (this.dataForm.brandId) {
              this.$http({
                url: this.$http.adornUrl(
                  `/product/brand/info/${this.dataForm.brandId}`
                ),
                method: "get",
                params: this.$http.adornParams(),
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.dataForm.name = data.brand.name;
                  this.dataForm.logo = data.brand.logo;
                  this.dataForm.descript = data.brand.descript;
                  this.dataForm.showStatus = data.brand.showStatus;
                  this.dataForm.firstLetter = data.brand.firstLetter;
                  this.dataForm.sort = data.brand.sort;
                }
              });
            }
          });
        },
        // 表单提交
        dataFormSubmit() {
          this.$refs["dataForm"].validate((valid) => {
            if (valid) {
              this.$http({
                url: this.$http.adornUrl(
                  `/product/brand/${!this.dataForm.brandId ? "save" : "update"}`
                ),
                method: "post",
                data: this.$http.adornData({
                  brandId: this.dataForm.brandId || undefined,
                  name: this.dataForm.name,
                  logo: this.dataForm.logo,
                  descript: this.dataForm.descript,
                  showStatus: this.dataForm.showStatus,
                  firstLetter: this.dataForm.firstLetter,
                  sort: this.dataForm.sort,
                }),
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.visible = false;
                      this.$emit("refreshDataList");
                    },
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            }
          });
        },
      },
    };
    </script>

# 三 阿里云配置支持跨域请求 #

1 配置方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

2 配置后的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 四 测试 #

1 上传图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

2 抓包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

3 观察是否上传成功

![20201030202718370.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/80fca31ec14946a2936b000a24a615cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/0edaa8f9c9394ca991d363d7acb710da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/f212b71fe29d43a88245fa6c590b8159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/8464e1b4ec2841f5be871d7a980d363d.png
[20201030202718370.png]: /images/20210724/7e28adcc279d4c9a8a5dcc486bfeaff6.png