前端element-ui中图片oss直传到阿里云

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
methods{
//自己编写的函数用于生成文件名，防止上传的文件重名  可以写也可以不写
    getUUID() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        return (
          c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8"
        ).toString(16);
      });
    },
  Uploadfile(param) {
      console.log(param);
      let file = param.file; // 得到文件的内容
      console.log(file);
      //填写获取签名的地址
      const getPolicyApiUrl =
        "http://dev.graphchain.top:1002/aliyun/oss/authority"; //获取oss签名的地址 这是后端的那个接口地址
      // 获取oss签名
      axios({
        method: "get",
        url: getPolicyApiUrl,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Access-Control-Allow-Origin": "*",
        },
      }).then((response) => {
        if (response.status == 200) {
          let policyData = response.data;
          console.log(policyData);
          /**
                         ossUrl 换成自己的Bucket的外网地址，
                         例如 https://human-resource-manage.oss-cn-shenzhen.aliyuncs.com
                         */
          this.ossUrl =
            "http://" + policyData.bucketName + "." + policyData.endpoint; //填写自己OSS服务器的地址
          // this.from.iconFilename=this.getUUID()+ file.name // 上面写的getUUID这个方法 这一步可以可不写，我这是因为后端需要我传名字
          // console.log( this.from.iconFilename)
          let fileName = this.getUUID() + "." + file.name.split(".").pop();
          console.log(fileName);
          this.accessUrl = policyData.dirName + "/" + fileName; //设置上传的访问路径
          this.sendData = new FormData(); // 上传文件的data参数
          this.sendData.append("OSSAccessKeyId", policyData.accessKeyId);
          this.sendData.append("policy", policyData.policy);
          this.sendData.append("signature", policyData.signature);
          // this.sendData.append("keys", policyData.dirName);
          this.sendData.append("key", this.accessUrl); //上传的文件路径
          this.sendData.append("success_action_status", 200); // 指定返回的状态码
          // this.sendData.append("type", "this.");
          this.sendData.append("file", file);
          this.sendData.append("callback", policyData.callback);
          this.sendData.append("name", fileName);
          // console.log(sendData);
          console.log(this.sendData);
//这是img的路径
          // this.pictureUrl =
          //   this.ossUrl + "/" + policyData.dirName + "/" + file.name;
          //   console.log( this.pictureUrl)
          this.from.iconFilename = fileName;
          console.log(this.from.iconFilename);
          axios.post(this.ossUrl, this.sendData).then((res) => {
            this.pictureUrl = this.ossUrl + "/" + this.accessUrl; //获得到的url需要将其存数据库中
            console.log(
              "上传到阿里云的图片地址：" + this.ossUrl + "/" + this.accessUrl
            );
          });
        }
      });
    },
}