要用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