tornado+vue实现上传文件

要用tornado+vue写一个后台管理系统，记录一下遇到文件上传时候的步骤：

1.Form表单里的代码：(这里是使用的饿了么表单组件)

 <el-form-item label="头像">
            <el-upload
                    class="avatar-uploader"//上传框框的样式
                    v-bind:action="FileUploadInterface"//这是请求后台的接口
                    //是否展示图片列表形式                    
                    :show-file-list="false"
                    :on-success="fund_manager_image_on_success"//接口调用成功之后的方法
                    //上传文件之前的判断方法，校验是否符合上传规范                    
                    :before-upload="fund_manager_image_before_upload">
                    //如果表单对象有图片，展示出来，没有展示要上传图标样式
                   <img v-if="formData.image" :src="formData.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            //展示图片地址
            <el-input v-model="formData.image"></el-input>

       </el-form-item>

2.method里面的方法：

//图片格式校验
 fund_manager_image_before_upload (file) {
      const isJPG =
              (file.name.endsWith('.JPG')) || (file.name.endsWith('.jpg')) ||
              (file.name.endsWith('.jpeg')) || (file.name.endsWith('.jpeg')) ||
              (file.name.endsWith('.PNG')) || (file.name.endsWith('.png'))
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('上传文件格式不正确!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      if (isJPG && isLt2M) {
        this.formData.image = ' '
      }
      return isJPG && isLt2M
    },
    //上传完成后的判断
    fund_manager_image_on_success (sss, item) {
      if (sss != null && sss.success) {
        this.formData.image = sss.data.src
      } else {
        this.formData.image = ''
      }
    }

3.后端代码（这里MyRequestHandler是做了处理，直接RequestHandler也可）

#上传文件接口
class FileUploadInterface(MyRequestHandler):
    #tornado的一个get请求
    def post(self):
        print("请求到了")
        # 判断上传文件大小
        size = int(self.request.headers.get('Content-Length'))
        print('图片大小:kb',size/1000)
        if size / 1000.0 > 2000:
            self.write("上传图片不能大于2M.")
            #获取请求里的文件
        imgfiles = self.request.files.get('file')
        if imgfiles is not None and len(imgfiles)>0:
            #单文件
            img=imgfiles[0]
            print(img.filename)
            print(img.body)
            print(img.content_type)
            # 对文件进行重命名
            name = get_file_name_by_time() +img.filename
            #阿里云文件上传            
            status=uploat_file(img.body,name)
            if status==200:
                result = {}
                result["src"] = "http://img1.jiutouxiang.com/"+name
                self.write(str(RJ(data=result)))
                return
        #相当于响应给页面
        self.write(str(RJ(success=False)))

4.阿里云上传文件代码

# -*- coding: utf-8 -*-
import oss2

#上传文件到阿里云
def uploat_file(input,name):
    # 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
    #auth = oss2.Auth('<yourAccessKeyId>', '<yourAccessKeySecret>')
    auth = oss2.Auth('51oVyuUmca02rNUe', 'DknGfLtN9Uo1he17CQd1cKtWyhS2Xq')
    # Endpoint以杭州为例，其它Region请按实际情况填写。
    bucket = oss2.Bucket(auth, 'http://oss-cn-shanghai.aliyuncs.com', 'jiutouxiang-oss')

    # requests.get返回的是一个可迭代对象（Iterable），此时Python SDK会通过Chunked Encoding方式上传。
    #input = requests.get('http://www.aliyun.com')
    return bucket.put_object(name, input).status

tornado+vue实现上传文件

猜你喜欢