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_encode
from 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 结合 提交文件 上传文件

html文件上传表单问题

ASP 表单文件上传

如何在 Python 中模拟 post 表单来上传文件

HTML中上传文件的表单(file有一个编辑框和一个浏览的按钮),客户只想要一个按钮,要求把编辑框去掉

----vue中实现上传文件给后台----