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