文件上传有两种方式upload

文件上传有两种方式

1.基于文件处理为文件流然后然后传给服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。

2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件

VUE elementUI 表单上传

在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。

1.图片上传模板

2、常用方法介绍

1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除

2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

3、通过append方法进行添加文件和数据

4、pPostFile为接口提交方式相当于axios

action为 提交的地址（接口名称）

formDataObj为表单中提交的所有参数（内容）

hearder即为header中需要的参数

在网络编程过程中需要向服务器上传文件。Multipart/form-data是上传文件的一种方式。

Multipart/form-data其实就是浏览器用表单上传文件的方式。最常见的情境是：在写邮件时，向邮件后添加附件，附件通常使用表单添加，也就是用multipart/form-data格式上传到服务器。

表单形式上传附件

具体的步骤是怎样的呢？

首先，客户端和服务器建立连接（TCP协议）。

第二，客户端可以向服务器端发送数据。因为上传文件实质上也是向服务器端发送请求。

第三，客户端按照符合“multipart/form-data”的格式向服务器端发送数据。

既然Multipart/form-data格式就是浏览器用表单提交数据的格式，我们就来看看文件经过浏览器编码后是什么样子。

点击“Browse…”分别选择“unknow.gif”和“unknow1.gif”文件，点击“submit”按纽后，文件将被上传到服务器。

下面是服务器收到的数据：

服务器收到的数据

这是一个POST请求。所以数据是放在请求体内，而不是请求头内。

这行指出这个请求是“multipart/form-data”格式的，且“boundary”是 “---------------------------7db15a14291cce”这个字符串。

不难想象，“boundary”是用来隔开表单中不同部分数据的。例子中的表单就有 2 部分数据，用“boundary”隔开。“boundary”一般由系统随机产生，但也可以简单的用“-------------”来代替。

实际上，每部分数据的开头都是由"--" + boundary开始，而不是由 boundary 开始。仔细看才能发现下面的开头这段字符串实际上要比 boundary 多了个 “--”

紧接着 boundary 的是该部分数据的描述。

接下来才是数据。

“GIF”gif格式图片的文件头，可见，unknow1.gif确实是gif格式图片。

在请求的最后，则是 "--" + boundary + "--" 表明表单的结束。

需要注意的是，在html协议中，用 “\r\n” 换行，而不是 “\n”。

下面的代码片断演示如何构造multipart/form-data格式数据，并上传图片到服务器。

//---------------------------------------

// this is the demo code of using multipart/form-data to upload text and photos.

// -use WinInet APIs.

//

//

// connection handlers.

//

HRESULT hr

HINTERNET m_hOpen

HINTERNET m_hConnect

HINTERNET m_hRequest

//

// make connection.

//

...

//

// form the content.

//

std::wstring strBoundary = std::wstring(L"------------------")

std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=")

wstrHeader += strBoundary

HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD)

//

// "std::wstring strPhotoPath" is the name of photo to upload.

//

//

// uploaded photo form-part begin.

//

std::wstring strMultipartFirst(L"--")

strMultipartFirst += strBoundary

strMultipartFirst += L"\r\nContent-Disposition: form-dataname=\"pic\"filename="

strMultipartFirst += L"\"" + strPhotoPath + L"\""

strMultipartFirst += L"\r\nContent-Type: image/jpeg\r\n\r\n"

//

// "std::wstring strTextContent" is the text to uploaded.

//

//

// uploaded text form-part begin.

//

std::wstring strMultipartInter(L"\r\n--")

strMultipartInter += strBoundary

strMultipartInter += L"\r\nContent-Disposition: form-dataname=\"status\"\r\n\r\n"

std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent))

// add text content to send.

strMultipartInter += wstrPostDataUrlEncode

std::wstring strMultipartEnd(L"\r\n--")

strMultipartEnd += strBoundary

strMultipartEnd += L"--\r\n"

//

// open photo file.

//

// ws2s(std::wstring)

// -transform "strPhotopath" from unicode to ansi.

std::ifstream *pstdofsPicInput = new std::ifstream

pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in)

pstdofsPicInput->seekg(0, std::ios::end)

int nFileSize = pstdofsPicInput->tellg()

if(nPicFileLen == 0)

{

return E_ACCESSDENIED

}

char *pchPicFileBuf = NULL

try

{

pchPicFileBuf = new char[nPicFileLen]

}

catch(std::bad_alloc)

{

hr = E_FAIL

}

if(FAILED(hr))

{

return hr

}

pstdofsPicInput->seekg(0, std::ios::beg)

pstdofsPicInput->read(pchPicFileBuf, nPicFileLen)

if(pstdofsPicInput->bad())

{

pstdofsPicInput->close()

hr = E_FAIL

}

delete pstdofsPicInput

if(FAILED(hr))

{

return hr

}

// Calculate the length of data to send.

std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst)

std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter)

std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd)

int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size()

// Allocate the buffer to temporary store the data to send.

PCHAR pchSendBuf = new CHAR[cSendBufLen]

memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size())

memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen)

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size())

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size())

//

// send the request data.

//

HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)

1、新建站点。

2、填写站点名字与网页的所在路径。

3、左侧栏选择服务器，在右侧栏选择“+”号。

4、填写你的服务器信息即可。

5、然后再高级中，设置一些同步的设置。

6、在站点下选择上传的选项就能把页面上传到服务器。

---