Vue.js 实现图片上传与进度显示

"本文档详细介绍了如何在Vue.js框架中实现一个简单的图片上传功能，包括显示上传进度条的实现步骤。" 在Vue.js项目中，实现图片上传功能通常涉及到前端与后端的交互，以及对文件操作的支持。下面将详细阐述这个过程： 1. 模板结构： 在Vue组件的`template`部分，可以看到一个包含图片预览和上传输入框的布局。`<div class="about">`包含了一个`<div>`用于展示已上传的图片，以及一个`<label>`元素用于文件选择。`<input type="file">`隐藏了文件选择控件，而通过`@change`事件监听文件的选择。`<span class="label">`用来实时显示上传进度。 ```html <template> <div class="about"> <div> <div v-for="item in pics"> <img :src="'https://.xxx.com' + item" alt="" /> </div> <label> <input type="file" ref="file" @change="up()" /> <span class="label" :style="{ width: pre + '%' }"></span> </label> </div> </div> </template> ``` 2. 样式设计： 在`<style scoped>`中，定义了样式来美化界面。`label`元素设置了固定宽度和高度，以适应图片预览，并且创建了一个绝对定位的`span.label`来显示进度条。`input`元素设置为隐藏，以便只显示文件选择图标。 ```css <style scoped> label { width: 100px; height: 100px; display: inline-block; overflow: hidden; background-color: #CCCCCC; color: #FFFFFF; font-size: 48px; text-align: center; line-height: 100px; position: relative; } input { display: none; } .label { position: absolute; display: inline-block; bottom: 0; left: 0; height: 2px; width: 0%; background-color: #FFA500; } </style> ``` 3. 数据和方法： 在`script`部分，组件的`data`对象初始化了`pics`数组（存储已上传图片的URL）和`pre`变量（用于存储上传进度）。 ```javascript export default { name: 'About', data() { return { pics: [], pre: 0, }; }, }; ``` `methods`对象中定义了`up`函数，该函数在文件选择后被调用。它首先获取选中的文件，然后创建一个`FormData`对象并附加文件。接着，使用`$http.post`发送POST请求到服务器，将文件数据和进度回调函数传递给后端。在`onUploadProgress`事件中，更新上传进度。 ```javascript methods: { up() { var that = this; var file = this.$refs.file.files[0]; var data = new FormData(); data.append('file', file); this.$http.post('https://.xxx.com/ajax/file.php', data, { onUploadProgress: function(e) { that.pre = e.loaded / e.total * 100; console.log('+++', e); } }).then((res) => { if (res.data.error === 0) { // 处理成功响应，例如添加图片URL到pics数组 } else { // 处理错误响应 } }); }, }, ``` 4. 后端交互： 上传的文件通过`axios`（或类似的HTTP库）发送到服务器，URL是`https://.xxx.com/ajax/file.php`。服务器端需要处理这个POST请求，接收文件，存储到服务器上，并返回一个响应，包含是否有错误的信息。 5. 成功与错误处理： 在`then`回调中，根据服务器返回的数据判断上传是否成功。如果`res.data.error`为0，表示成功，此时可能需要将图片URL添加到`pics`数组，以便在前端显示；如果有错误，可以进行相应的错误提示。 总结，Vue.js实现图片上传功能涉及前端的文件选择、进度条更新，以及与后端API的通信。通过合理的组件结构、样式设计和事件处理，可以构建出一个用户友好的图片上传组件。