在Vue.js中实现移动端图片上传功能，通常涉及到前端与后端的数据交互，文件选择、预览、限制以及上传过程中的状态处理。以下是一份详细解释和实现步骤：
1. **HTML模板**：
- `input[type="file"]`：这是用于用户选择文件的关键元素，通过`@change`事件监听文件的选择。
- `img`标签：用于预览选定的图片，`src`属性绑定数据中的图片URL。
- `div`容器：根据条件显示或隐藏预览区和操作按钮。
```html
<template>
<div class="box">
<div class="upDiv">{{labTex}}</div>
<input ref="uploadInput" type="file" class='upinp' name="file" value="" accept="image/gif,image/jpeg,image/jpg,image/png" @change="selectImg($event)"/>
<div :class="operationShow?'operation-div':'operation-div hide'">
<img class="shoImg" :src="imgDefault">
</div>
</div>
</template>
```
2. **JavaScript组件**：
- `props`：接收父组件传递的值，如标题文本、默认图片等。
- `data`：定义组件内部的数据，如图片的URL和操作显示状态。
- `mounted`：组件挂载后执行的函数，可以获取父组件传入的初始值。
- `methods`：包含处理文件选择、文件检查和上传的函数。
3. **文件选择与预览**：
- `selectImg`方法：当用户选择文件后，通过`event.target.files[0]`获取选中的文件，然后设置预览区域的显示状态，并进行文件有效性检查。
4. **文件有效性检查**：
- `checkFile`方法：确保文件非空，并检查文件大小。在这个例子中，如果文件大小不为0，则认为文件有效。你可以根据实际需求调整大小限制。
5. **图片上传**：
- `upload`方法：创建一个`XMLHttpRequest`对象，用于发起HTTP请求到服务器。`xhr.open("POST", ApiUrl+"/member/image/upload", true)`配置上传接口地址和类型。
- 使用`FormData`对象封装文件，以便通过`XMLHttpRequest`发送。
- `xhr.send()`发送请求，将文件作为表单数据的一部分。
- `xhr.onreadystatechange`监听状态变化，当响应完成且状态码为200时，解析返回的数据。
6. **服务器响应处理**：
- 如果服务器返回成功，通常会得到一个包含图片URL或其他相关信息的JSON对象。你可以将这个URL赋值给`dataUrl`，并更新预览图片的`src`。
```javascript
methods: {
...
upload(file) {
let self = this;
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open("post", ApiUrl+"/member/image/upload", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let returnData = JSON.parse(xhr.responseText);
if (returnData && returnData.code) {
self.dataUrl = returnData.data.url; // 假设返回数据中有"data.url"
// 更新预览图和其他操作
} else {
// 错误处理
}
} else {
// 网络错误处理
}
}
};
xhr.send(formData);
},
...
}
```
7. **样式与交互**：
- 你可能还需要添加CSS来控制布局和交互效果，比如添加上传按钮的样式，预览图片的展示，以及上传状态的提示等。
以上就是Vue.js实现移动端图片上传的基本流程。需要注意的是，实际应用中，你可能还需要处理错误情况，比如网络问题、文件格式不支持、服务器错误等，并且为了用户体验，可以考虑添加进度条展示上传进度。同时，考虑到安全性和性能，建议对上传的文件进行大小和类型的限制。
