picture_list{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.picture_item{
width: 48%;
height: 0;
padding-bottom: 96%; /* 设置图片的宽高比例为16:9 */
position: relative;
}
.image{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.upload_progress{
position: absolute;
bottom: 2%; /* 根据图片高度动态计算距离底部的距离 */
left: 50%;
transform: translateX(-50%);
background-color: rgba(0,0,0,0.5); /* 设置背景颜色及透明度 */
color: #fff; /* 设置文字颜色 */
font-size: 12px; /* 设置字体大小 */
}
以下是重构后的代码：
```css
.picture_item {
margin: 10px;
position: relative;
width: 160rpx;
height: 160rpx;
}
.upload_progress {
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background-color: #000;
color: #fff;
width: 160rpx;
height: 160rpx;
text-align: center;
line-height: 160rpx;
font-size: 12px;
}
.picture_item img {
width: 160rpx;
height: 160rpx;
}
```
```javascript
/**
* 页面的初始数据
*/
data: {
upload_picture_list: []
},
uploadpic: function (e) {
var that = this;
var upload_picture_list = that.data.upload_picture_list;
wx.chooseImage({
count: 8, // 默认9,这里显示一次选择相册的图片数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var tempFiles = res.tempFiles; //返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var fileList = []; //循环把图片加入上传列表
for (var i in tempFiles) {
tempFiles[i]["upload_percent"] = 0; //将每个图片的上传进度设置为0%
fileList.push(tempFiles[i]); //将每个图片的信息添加到fileList数组中，用于后续发送给后端服务器进行处理和上传
}
wx.uploadFile({ //调用微信原生的上传功能，将fileList中的图片信息发送给后端服务器进行保存和展示，并更新对应的上传进度条等效果。注意要加上success回调函数来获取成功之后的服务器返回结果。具体实现根据实际项目来定。例如可以使用axios库来进行http请求等操作。
uri: 'https://example.com/api/upload', //上传接口地址，需要根据实际情况修改，一般会有一个后端专门来处理图片上传的操作。如果使用小程序自带的上传功能则不需要此项，因为它已经内置了对后端的请求。同时要注意url后面要带上参数说明要上传什么类型的文件和文件的标识信息等，比如可以加上文件名和类型等信息。如果是在小程序中使用的wx.chooseImage或者wx.getImageInfo函数获取的图片信息，则可以通过传递一个对象参数来告诉小程序要上传的是哪个文件的信息，如下所示：{filename: 'test.jpg', filePath: 'test.jpg'}。其中filename为文件名，filePath为文件路径。如果是在网页上使用的input元素获取的图片数据信息，则可以通过传递一个FormData对象参数来告诉网页要上传的是哪些文件的信息，如下所示：new FormData().append('files', file)。其中files为要上传的文件名或文件路径。然后通过ajax或fetch等方式将这个FormData对象发送到后端即可。具体实现可以根据实际情况来定。
将提供的代码重构如下：
```javascript
let tempFiles = [
// ...
];
let upload_picture_list = [];
for (let i = 0; i < tempFiles.length; i++) {
tempFiles[i][`path_server`] = ``;
upload_picture_list.push(tempFiles[i]);
}
that.setData({
upload_picture_list: upload_picture_list,
});
for (let j in upload_picture_list) {
if (upload_picture_list[j][`upload_percent`] === 0) {
upload_file_server(that, upload_picture_list, j);
}
}
function upload_file_server(that, upload_picture_list, j) {
console.log(`开始上传${j}图片到服务器：`);
console.log(upload_picture_list[j]);
var upload_task = wx.uploadFile({
url: `http://www.szfangwei.cn/`, // 需要用HTTPS,同时在微信公众平台后台添加服务器地址
filePath: upload_picture_list[j][`path`], // 上传的文件本地地址
name: `file`,
formData: { `path`: `wxchat` }, // 附近数据，这里为路径
success: function (res) {
var data = JSON.parse(res.data); // 字符串转化为JSON
if (data.Success == true) {
var filename = `http://www.szfangwei.cn/${data.SaveName}`;
upload_picture_list[j][`path_server`] = filename;
}
that.setData({
upload_picture_list: upload_picture_list,
});
},
});
}
```
以下是重构后的代码：
```javascript
console.log("图片上传" + j + "到服务器完成：");
console.log(upload_picture_list[j]);
upload_task.onProgressUpdate((res) => {
upload_picture_list[j]["upload_percent"] = res.progress;
console.log("第" + j + "个图片上传进度：" + upload_picture_list[j]["upload_percent"]);
console.log(upload_picture_list);
that.setData({
upload_picture_list: upload_picture_list
});
});
```
PHP代码：
```php
// $path为上传路径
public function upload($path) {
if (IS_POST) {
$upload = new \Think\Upload(); // 实例化上传类
$upload->exts = array('jpg', 'bmp', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->saveName = array('randomname', '6');
$upload->maxSize = 2024000; //图片上传
$upload->rootPath = '/Public'; // 设置附件上传目录
}
}
```
这段代码是用于微信小程序多图上传功能的实现。首先，设置上传文件的保存路径为`/upload/`,并将自动子目录功能关闭。接着，调用`upload()`方法进行上传操作。如果上传过程中出现错误，将错误信息存储在`$data['Message']`中，并将`$data['Success']`设置为`false`。如果上传成功，遍历`$info`数组，获取每个文件的保存路径和文件名，将其存储在`$data['SaveName']`中，并将`$data['Success']`设置为`true`。最后，通过`ajaxReturn()`方法返回上传结果。
需要注意的是，此代码示例要求基础库版本为1.4.0及以上，才能支持图片进度显示。如果基础库版本较低，需要进行兼容处理或者不显示进度。此文章为方维网络原创，转载请注明出处。
