前端上传文件到阿里云的服务器，并返回文件的存储地址

准备条件：

1）你选择的accessKeyId必须有文件写权限，没有的话你得先配置读写权限

2）设置这个bucket的跨域

3）vue要安装  npm install ali-oss

登陆你的账号 https://www.aliyun.com/ 设置

我的vue项目实现是。

1、将上传文件封装到一个oss.js文件

let OSS=require('ali-oss');

let client=new OSS({
  region: 'oss-cn-beijing',//服务器的地区
  accessKeyId: 'xxxxxxxxxx....',
  accessKeySecret: '。。。。',
  bucket: 'xxx' // 相当于阿里云上你创建的一个文件夹
});


let fileOperation= {

  //上传
  //objectUrl文件路径，file文件
  "putFile": async function (objectUrl,file) {
    console.log(objectUrl,"上传",file);
    try {
      let result = await client.put(objectUrl, file);
      return result.url;
    } catch (err) {
      console.log(err,"上传err");
    }
    return '';
  },


}


export default fileOperation;

2、前端的效果图

点击图片按钮，选择了文件后自动上传到服务器

html

<div class="modal-tr">
              <span class="red-dot"></span>
              <span>申报材料</span>
              <div style="display: inline-block;margin-left: 1rem">
                <img  src="../../../assets/images/center/ic_add.png" @click="addFile()"/>
                <span v-show="fileList.length>0" v-text="item" v-for="item in fileList" class="pre-file-name"/>
                <input hidden ref="filCourseElem" type="file" class="upload-file" @change="getFile">
              </div>
            </div>

 

js

要引入oss.js文件

import oss from '@/utils/oss'

 // start上传文件
        addFile(){
          this.$refs.filCourseElem.dispatchEvent(new MouseEvent('click'));//触发<input type='file' />
        },
        getFile(){
          var that = this;
          const file = this.$refs.filCourseElem.files;
          console.log(file,'文件')
          // var fileEndString=inputFile[0].name.split(".")[1];
          if(file){
            if(!/(\.png|\.gif|\.jpeg|\.jpg)/i.test(file[0].name)){
              alert('不是有效的文件！请上传.doc|.docx|.txt的文件');
              return;
            }
            that.fileList.push(file[0].name)
            var reader = new FileReader();
            reader.readAsDataURL(file[0]);
            reader.onload = function (e) {
              //that.payment.certificatesImg.push(e.target.result);//图片预览，保存地址
              console.log("图片",e.target)              
            }
            let date=new Date();

            // 你想保存的文件路径
            // 你的bucket/img/2020-08/xx.png
            let objectUrl="img/"+date.getFullYear()+"-"+(date.getMonth()+1)+"/"+file[0].name;
            let fileUrl = oss.putFile(objectUrl,file[0]);//得到文件的绝对路径
            if(fileUrl!=""){

            //你的其他操作

            }else {
              this.$message.error('上传文件失败');
              return "上传文件失败"
            }

          } else {
            return;
          }
        },
        //end 上传文件