flask Vue 上传文件至阿里云OSS对象存储,返回url链接

需求:前端负责将文件传递给后端,后端处理完之后上传到阿里云OSS对象存储，(这里对上传的文件进行论文查重)

Flask

# 允许的扩展名
ALLOWED_EXTENSIONS = {'doc','docx'}


# 检查后缀名是否为允许的文件
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

endpoint = 'https://oss-cn-shanghai.aliyuncs.com'
AccessKey_ID = "LTAI5tKBwN5KEWCAjzGFK6xGxxx"
AccessKey_Secret = "sNjoIzCeg7liQhS5NY0gEILF5f7Zlyxxx"
bucket_name = "xxxeducation"



class UploadResource(Resource):
    '''上传文件'''
    def put(self):
        uploaded_file = request.files.get("file")
        if uploaded_file is None:
            return {'code': 400, 'message': '文件上传失败！'}
        # 获取文件名
        file_name = uploaded_file.filename
        # 判断文件类型是否符合要求
        file_name_bool = allowed_file(file_name)
        if not file_name_bool:
            return {'code': 400, 'message': '文件格式不正确,却上传doc,docx类型文件！'}
        file_name_doc = file_name.rsplit('.')
        # hash_name = hashlib.md5((file_name.split('.')[0] + str(cruuent_time)).encode('utf-8')).hexdigest() + '.docx'
        # 获取当前时间 时分秒
        now_time = time.strftime('%Y%m%d%H%M%S')
        upload_file_name = file_name_doc[0] + "_" + now_time+ "." +file_name_doc[-1]
        # 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        auth = oss2.Auth(AccessKey_ID, AccessKey_Secret)
        bucket = oss2.Bucket(auth, endpoint, bucket_name)
        # 上传文件
        upload_result = bucket.put_object(upload_file_name, uploaded_file)
        if upload_result.status == 200:
            # 上传成功后获取url
            file_url = bucket.sign_url("GET",upload_file_name,60)
            print(file_url)
        # uploaded_file.save(in_data)
            return {'foo': "上传成功"}
        else:
            return {'code': 400, 'message': '上传失败!'}

Vue

h2>文件上传</h2>
    <el-upload
      style="width: 350px"
      class="upload-demo"
      ref="upload"
      :limit="1"
      :file-list="fileList"
      action="#"
      :http-request="httpRequest"
      accept=".doc,.docx"
    >
      <el-button type="primary">点击上传</el-button>
      <div class="el-upload__tip">只能上传doc,docx类型的文件</div>
    </el-upload>



httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let data = new FormData(); // FormData 对象
      data.append("file", fileObj); // 文件对象
      axios
        .put(this.baseUrl + "/app/uploads/", data, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          console.log("结果：", res);
        })
        .catch((error) => {
          console.log("错误：", error);
        });
    }