上传附件
- 使用van-uploader组件
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" max-count="{{1}}"
deletable="{{ true }}" bind:delete="deleteAll" accept="all">
<van-button custom-class="fup" round icon="plus" type="primary" size="small">上传附件</van-button>
</van-uploader>
- file-list 可以绑定已经上传的图片列表,并展示图片列表的预览图
- bind:after-read 文件上传完毕后会触发after-read回调函数,获取到对应的文件的临时地址
- max-count 属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域
- deletable 是否展示删除按钮
- bind:delete 删除图片
- accept 接受的文件类型, 可选值为all(所有类型) media(媒体音频) image(图片) file(文件) video(视频)
- afterRead 回调函数
afterRead (event) {
const {
file
} = event.detail; //获取图片信息
const that = this;
console.log(file);
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
wx.uploadFile({
url: `${devConfig.url}/MaterialUploadFile`, // 调用后端上传文件接口
filePath: file.url, //图片地址
name: "uploadfile",// 这个须得与后端一致
success (res) {
// 上传完成需要更新 fileList
console.log(res);
const datamarks = res.data.match(/(\/\U.*?\")/g)[0];
const data2 = datamarks.match(/[^\"]*/g)[0]; // 见下面
console.log(data2);
that.data.materialObjet.fileList.splice(0, 0, {
...file,
url: devConfig.imgUrl+data2
}); // 将后端返回的地址添加到fileList中,用于显示出改文件
that.setData({
fileList: that.data.materialObjet.fileList
});
}
});
},
上面的正则是由于我后端返回的地址有问题,所以使用了正则匹配
- 后端代码
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public string MaterialUploadFile()
{
ReceiveResultData resultData = new ReceiveResultData();
try
{
HttpPostedFile file = HttpContext.Current.Request.Files["uploadfile"];// 上面的name须得与"uploadfile"一致
string date = "物料台账_" + DateTime.Now.ToString("yyyy-MM");
string filePath = ConfigHelper.UploadFilePath + "物料台账\\" + date + "\\";
string path = ConfigHelper.DownLoadFilePath + filePath;
path = path.Replace("\\\\", "\\");
//虚拟路径处理
if (ConfigHelper.DownLoadFilePath.IndexOf("\\") == 0)
{
path = "\\" + path;
}
//判断文件是否存在,不存在则创建
if (Directory.Exists(filePath) == false)//如果不存在就创建file文件夹
{
Directory.CreateDirectory(filePath);
}
ResultMessage rm = UploadifyHelper.UploadifyWX(file, filePath, true);
//resultData.ResultState = rm.Success == "ok" ? 1:0;
resultData.ResultMsg = rm.Data;
return JsonHelper.Serializer(resultData.ResultMsg);
}
catch (Exception ex)
{
throw ex;
}
}