weui上传图片怎么写js

WeUI 是一套基于微信样式的前端 UI 库，它提供了一系列的组件来帮助开发者快速构建微信风格的界面。在 WeUI 中，上传图片的功能可以通过 weui-uploader 组件来实现。

基础概念

weui-uploader 组件允许用户通过选择文件或拍照的方式上传图片，并提供了多种配置选项来满足不同的需求。

优势

简洁易用：组件提供了简单的 API 和直观的用户界面。
灵活配置：支持自定义上传地址、上传前的图片压缩、上传进度显示等功能。
兼容性好：与微信小程序和微信内网页都有良好的兼容性。

类型

WeUI 的上传组件主要分为两种类型：

基础上传：简单的图片上传功能。
高级上传：支持多选、拖拽上传、图片预览等功能。

应用场景

社交应用：用户头像上传、朋友圈图片分享。
电商网站：商品图片上传、用户评价上传图片。
企业应用：员工证件上传、项目资料上传。

示例代码

以下是一个简单的 WeUI 图片上传功能的 JavaScript 实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WeUI Uploader Example</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
</head>
<body ontouchstart>
<div class="weui-uploader">
    <div class="weui-uploader__hd">
        <p class="weui-uploader__title">图片上传</p>
    </div>
    <div class="weui-uploader__bd">
        <ul class="weui-uploader__files" id="uploaderFiles"></ul>
        <div class="weui-uploader__input-box">
            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
        </div>
    </div>
</div>

<script>
document.getElementById('uploaderInput').addEventListener('change', function(e) {
    var files = e.target.files;
    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        var reader = new FileReader();

        reader.onload = function(e) {
            var li = document.createElement('li');
            li.className = 'weui-uploader__file';
            li.style.backgroundImage = 'url(' + e.target.result + ')';
            document.getElementById('uploaderFiles').appendChild(li);
        };

        reader.readAsDataURL(file);
    }
});
</script>
</body>
</html>

可能遇到的问题及解决方法

图片上传失败：
- 原因：可能是上传地址错误、网络问题或服务器端处理问题。
- 解决方法：检查上传地址是否正确，确保服务器端能够接收并处理上传的文件。

图片预览不显示：
- 原因：可能是 FileReader 读取文件失败或 DOM 操作错误。
- 解决方法：确保 FileReader 的 onload 事件正确绑定，并且 DOM 元素选择无误。
多选图片上传顺序错乱：
- 原因：异步读取文件可能导致顺序问题。
- 解决方法：可以通过为每个文件添加一个索引，并在读取完成后按照索引顺序插入 DOM 来解决。