Vue 表单提交 -- 文件上传
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 表单提交 -- 文件上传相关的知识,希望对你有一定的参考价值。
参考技术A 1.必须是post请求,需要设置headers: 'Content-Type':'multipart/form-data',在这个前提下才能文件上传。2.你的文件上传 <input type="file" @change="getFile($event)"/>
外层要有 <form enctype="multipart/form-data" name="fileinfo" id="myForm"></form>
3. <input type="file" @change="getFile($event)"/> 的change方法很重要,要记得加上,是用来获取选择的文件的信息数据。
4.参数传递要这么处理:把接口的所有参数通过这个方式加到params里。这样在控制台看到的参数格式才是对的,如下图。
这里遇到一个坑,就是不这么处理,而是简单的formData = params这么传递,auth_user_file看到是{},虽然选择文件时在控制台能看到信息,但是作为接口参数传递时就为;
5.因为我们这个项目的文件上传项不是必填,也可以选择手动输入,如果没有选择文件,建议这么处理。
-- headers: 'Content-Type': 'application/x-www-form-urlencoded'
-- params = Qs.stringify(params);//处理参数参数作为对象传递就可以了,但是要用vue的qs进行处理。参数格式在控制台看到是这样的
关于文件上传实现的源码贴在下面,供参考
PermissionSettings.vue
servers.js
$.ajax文件上传:
报错
增加参数:processData设置为false。因为data值是FormData对象,不需要对数据做处理。
如何在 Python 中模拟 post 表单来上传文件
在机器上安装了Python的setuptools工具,可以通过下面的命令来安装 poster:
easy_install poster装完之后,安装下面代码就可以实现post表单上传文件了:
from poster.encode import multipart_encodefrom poster.streaminghttp import register_openers
import urllib2
# 在 urllib2 上注册 http 流处理句柄
register_openers()
# 开始对文件 "DSC0001.jpg" 的 multiart/form-data 编码
# "image1" 是参数的名字,一般通过 HTML 中的 <input> 标签的 name 参数设置
# headers 包含必须的 Content-Type 和 Content-Length
# datagen 是一个生成器对象,返回编码过后的参数
datagen, headers = multipart_encode("image1": open("DSC0001.jpg", "rb"))
# 创建请求对象(localhost服务器IP地址,5000服务器端口)
request = urllib2.Request("http://localhost:5000/upload_image", datagen, headers)
# 实际执行请求并取得返回
print urllib2.urlopen(request).read() 参考技术A
发个以前用urllib2模块来做的
class HTTPError(urllib2.HTTPDefaultErrorHandler):def __init__(self):
self.errMsg = ''
def getErrorMsg(self):
return self.errMsg
def http_error_default(self, req, fp, code, msg, hdrs):
if code >= 400 :
self.errMsg = fp.read()
raise urllib2.HTTPError(req.get_full_url(), code, msg, hdrs, fp)
'''
urllib2 post request: eg. uploadfile
'''
def sendMultipartPost(url, params, files):
#params like this :'type':'upload','id':'xxxx'
#files like this: 'file':'C:/xxxx.txt'
posterParams = []
for key in params:
value = params[key]
try:
posterParams.append(poster.encode.MultipartParam(key, value))
except Exception, e:
print e, key, value
raise e
for key in files:
value = files[key]
try:
value = value.encode(sys.getfilesystemencoding())
posterParams.append(poster.encode.MultipartParam.from_file(key, value))
except Exception, e:
print e, key, value
raise e
try:
datagen, headers = poster.encode.multipart_encode(posterParams)
except Exception, e:
print e, key, value
raise e
if headers is None:
headers =
try:
request = urllib2.Request(url, datagen, headers)
request.add_header('Accept-encoding', 'gzip')
request.add_header("Accept", "*/*")
# print request
# print request.get_data()
opener,err = getUrllib2(True, False)
response = opener.open(request)
except Exception, e:
print e, url, files
print err.getErrorMsg()
raise e
data = response.read()
'''
data = response.read(16*1024)
length = len(data)
_data = None
while length:
if _data: data += _data
_data = response.read(16*1024)
length = len(_data)
'''
if 'gzip' == response.headers.get('content-encoding', ''):
compressedstream = StringIO.StringIO(data)
gzipper = gzip.GzipFile(fileobj=compressedstream)
data =gzipper.read()
return data
def getUrllib2(upload = False, redirect = False):
if upload:
handlers = poster.streaminghttp.get_handlers()
else:
handlers = []
err = HTTPError()
handlers.append(err)
handlers.append(getCookie())
try:
opener = urllib2.build_opener(*handlers)
except Exception, e:
print err.getErrorMsg()
raise e
return opener,err
def getCookie():
global _cookieProcessor
cookiefile = "./cookies.txt"
try:
httpcookie = cookielib.MozillaCookieJar(cookiefile)
httpcookie.load(ignore_discard=True, ignore_expires=True)
httpcookie = urllib2.HTTPCookieProcessor(httpcookie)
except Exception, e:
print e
httpcookie = _cookieProcessor
# _cookieProcessor = urllib2.HTTPCookieProcessor(cookielib.CookieJar())
return httpcookie本回答被提问者和网友采纳 参考技术B Python-Requests 非常方便。
我的某个上传文件代码(是的,multipart / form-data 上传就这一行)
r = requests.post (server('new'), files='content' : open('test.md', 'rb'))
以上是关于Vue 表单提交 -- 文件上传的主要内容,如果未能解决你的问题,请参考以下文章
vue axios 与 FormData 结合 提交文件 上传文件