前端功能设计篇 --【图片文件上传】

更多

图片(文件)上传 实现方案：

方案一：form表单

<form action="/api/upload">
    <div class="form-item"><input type="text" /></div>
    <div class="form-item"><input type="passward" /></div>
    <div class="form-item"><input type="file" /></div>
    <div class="form-item"><input type="submit" /></div>
</form>

缺点：

form提交之后会刷新页面，从而影响用户体验, 还可能造成局部数据丢失。

方案二：form + iframe

这是方案一的改进版本。将form表单action指向一个隐藏的iframe(或将form表单放在iframe中), 这样可以实现局部刷新。

方案三：ajax + formData

前端通过ajax 可以实现异步请求，避免了页面刷新。formData是XHR中的一种数据格式(键值对)，常用于发送表单数据。

let formData = new FormData();
formData.append("file", fileInputElement.files[0]);
let request = new XMLHttpRequest();
request.open("POST", "http://server.com/upload");
request.send(formData);

方案四：第三方组件

• antd/element 的 upload 组件
• FilePond 可以上传任何内容
• vue-simple-uploader