脚手架 oss 直传

一.执行安装阿里oss包

npm install ali-oss

  二.页面

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="照片标题" prop="title">
      <el-input v-model="ruleForm.title" ></el-input>
    </el-form-item>
    <el-form-item label="标签" prop="tagsUsers">
      <el-checkbox-group v-model="ruleForm.tagsUsers">
        <el-checkbox v-for="tag in tagsUsers" :label="tag.dict_key" :key="tag">{{tag.dict_key}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="作品上传" prop="viewUrls">
    <div class="upload-file">
      <el-upload
        accept="image/*"
        ref="upload"
        multiple
        :limit="500"
        action="/system/api/blade-resource/oss/endpoint/put-file?code=aliyun"
        :on-preview="handlePreview"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        listType= "picture-card"
        :file-list="fileList"
        :http-request="uploadFile"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
       <!-- <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器
        </el-button>-->
      </el-upload>
    </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitUpload">立即创建</el-button>
     <!-- <el-button @click="resetForm('ruleForm')">重置</el-button>-->
    </el-form-item>
  </el-form>
</template>

　　三.js调用

<script>
  import {add} from "@/api/admin/touralbumitem";
   import axios from 'axios';
  import OSS from 'ali-oss';
  // import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        fileData: '',  // 文件上传数据（多文件合一）
        tagsUsers:[],
        fileList: [],   // upload多文件数组
        uploadData: {
          fieldData: {
            id: '', // 机构id,
          }
        },
        ruleForm: {
          title: '',
          tagsUsers:[],
          viewUrls:[]
        },
        rules: {
          title: [
            { required: true, message: '请输入作品标题', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          tagsUsers: [
            { required: true, message: '请选择标签', trigger: 'change' }
          ]
        }
      };
    },
    created:function(){
      this.fuxuankuang();
    },
    methods: {
      fuxuankuang:function () {
        axios.get('/system/api/xqwl-competition/tournamentinfo/getTagsUser',{
          params:{
            id: this.$route.query.tournamentId
          }
        }).then(res =>{
          this.tagsUsers = res.data.data
        })
      },
      submitForm() {
        this.ruleForm.tournamentId = this.$route.query.tournamentId
        let user = JSON.parse(localStorage.getItem('saber-userInfo'))
        this.ruleForm.authorId = user.content.wxUnionid
        add(this.ruleForm).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$router.push({
            path:'/admin/touralbumitem',
            query:{
              id:this.$route.query.tournamentId
            }
          })
        }, error => {
          console.log(error);
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 上传文件
      uploadFile(file) {
        this.fileData.append('files', file.file);  // append增加数据
      },
      // 上传到服务器
      submitUpload() {
        if (this.ruleForm.title.length ===0) {
          this.$message({
            message: '请填写作品标题',
            type: 'warning'
          })
          return false;
        }
        if (this.ruleForm.tagsUsers.length ===0) {
          this.$message({
            message: '请选择作品标签',
            type: 'warning'
          })
          return false;
        }
        
        if (this.fileList.length === 0) {
          this.$message({
            message: '请先选择文件',
            type: 'warning'
          })
        } else {
          const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
          if (!isLt100M) {
            this.$message.error('请检查，上传文件大小不能超过100MB!');
          } else {
            let _this =this;
            const loading = this.$loading({
              lock: true,
              text: `上传中,请稍后。。。`,
              spinner: "el-icon-loading"
            });
            var client = new OSS({
              region: 'oss-cn----',
              accessKeyId: '-------',
              accessKeySecret: '--------',
              bucket: '--------'
            });
            this.fileData = new FormData();
            this.$refs.upload.submit();
            for (let i = 0; i < this.fileList.length; i++) {
              const file = this.fileList[i]
              client.multipartUpload(file.name, file.raw).then(function(res){
                var str=res.res.requestUrls[0]
                _this.ruleForm.viewUrls.push(str.split("?")[0])
                // _this.$emit('childByValue', str.split("?")[0])
                if (_this.fileList.length === _this.ruleForm.viewUrls.length) {
                  loading.close();
                  _this.submitForm()
                }
              }).catch((err) => {
                console.log(err)
              })
            }

          }
        }
      },
      //移除
      handleRemove(file, fileList) {
        this.fileList = fileList;
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 选取文件超过数量提示
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 100 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //监控上传文件列表
      handleChange(file, fileList) {
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.fileList = fileList;
      },
    }
  }
</script>