前端el-upload拖拽上传文件到oss服务器

1，准备上传文件的代码：复制组件库代码，按照需求微调

<el-upload
              action="string"   //这个action字段必须要，里面内容随便写
              class="upload-demo"
              drag
              :multiple="true"  //true代表允许多个文件一起拖拽，false就是一个文件
              :file-list="fileList"
              :on-change="onChenge" 
              :auto-upload="false"
              :on-remove="handleRemove"
              accept=".doc,.docx,.xls,.xlsx,.pdf,.jpg,.mp4,.zip,.jar,.rar,.rar4,.7z"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" @click="fileUp">
                将文件拖到此处，或<em>点击上传</em>
                <div :style="{'color':(isLt5M?'':'red')}">文件大小不要超过100M!</div>
              </div>
              <div style="color:red;">{{upPromptInformation}}</div>
            </el-upload>
          </form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancelDialog(0) ">取 消</el-button>
          <el-button size="small" type="primary" @click="determine(0)">确定</el-button>
        </div>
      </el-dialog>

2，讲解一下需要的东西：

这里我使用了上传服务器的接口，这个接口不需要传递参数，目的是返回以下这些oss服务器客户端的东西，通过这个客户端可以实现上传，下载，预览等等相关的需求
        region,//这些都是你们公司在购买阿里云的时候设定的
        accessKeyId: creds.AccessKeyId,//这些都是你们公司在购买阿里云的时候设定的
        accessKeySecret: creds.AccessKeySecret,//这些都是你们公司在购买阿里云的时候设定的
        bucket,
        secure:true,//在 OSSClient 初始化时加上 secure:true 就是 https 传输了
如果没有这个接口，就需要自己手动写一个js文件，配置上面的信息。

以下是我接口返回的，后端都准备好了

 3，js部分的代码

     先单独用一个upFile事件去掉服务器接口

    upFile(file,callback){
      let url = '/xxxx/xxxx/xxxx';  //这是接口地址
      postAction(url,{}).then((res) => {
        console.log('我是服务器上传接口',res)
        if(!res){
          Vue.prototype.$message.warning("oss配置信息没有获取到，不能上传");
          return null;
        }
        let typeFile= 'text/plain'
        if(file.type==='application/pdf'){
            typeFile=file.type;
        }
        const client = new OSS(res.result); //res.result就是第2步提及的
        let tempCheckpoint;
        client.multipartUpload(`/testFile/UploadFiles/${file.name}`, file, {  
                               //这里``里面的是自己设置的文件路径，最后url返回的地址就是它
            progress: (p, checkpoint) => {
                // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
                tempCheckpoint = checkpoint;
            },
            meta: {year: 2020, people: 'test'},
            mime:typeFile,
        }).then(result => {
          console.log('.....result',result)
            callback && callback(result);
        })
      })
    },

        然后再onchenge事件里面，再调一次上面这个upFile

               这一步会把上传文件时，文件的一些信息以参数形式放入服务器接口，最终目的是拿到文件路径。到这一步完成，上传到服务器就成功了，至于文件以什么形式展示，看需求进行修改即可。我的是上传后，会有一个列表进行展示，可以搜索，查询，所以又调了新的查询接口，就不展示了。

onChenge(file, fileList) {
      console.log('文件上传事件file+fileList',file,fileList)
      let arr=fileList.map((item)=>{
        return item.name
      })   
      this.uploadName=arr
      this.fileList = fileList
      this.uploadFile.append('file', file.raw)
      this.isLt5M = file.size / 1024 / 1024 < 100;
      const fileCopy=file.raw
      const formData=new FormData()
      formData.append('fileCopy',fileCopy)
      this.upFile(file.raw,(res)=>{
        console.log('复调服器接口',res)
        let url=res.res.requestUrls[0]
        if(url.indexOf('?') !=-1){           //要对路径做处理
          url=url.split('?')[0]
          console.log('url路径2',url)
          this.requestUrl.push({url})
        }
         //拿到路径，我后面有需求会把路径传给后端存数据库， 
        做搜索功能
        if(res){
          this.$message.success('文件上传成功');
        }
      })
    },

4补充：上传文件的弹窗,data中的参数没有展示，自己补充完整，点击事件也没展示完，核心步骤有就行。

最后页面样子展示一下：