对接七牛云的上传图片给我写一个DEMO

很高兴为您提供这个DEMO。以下是一个使用七牛云上传图片的简单示例：

HTML代码：

<input type="file" id="fileInput">
<button id="uploadButton">上传</button>

JavaScript代码：

var qiniuUploadUrl = 'https://up-z2.qiniup.com';
var qiniuUploadToken = 'your_upload_token_here';

var fileInput = document.getElementById('fileInput');
var uploadButton = document.getElementById('uploadButton');

var uploader = new QiniuJsSDK().uploader({
    runtimes: 'html5',
    browse_button: 'fileInput',
    uptoken: qiniuUploadToken,
    domain: 'your_bucket_domain_here',
    get_new_uptoken: false,
    max_file_size: '100mb',
    auto_start: false,
    unique_names: true,
    save_key: true,
    init: {
        'FilesAdded': function(up, files) {
            // 文件添加进队列后，处理相关的事情
        },
        'BeforeUpload': function(up, file) {
            // 每个文件上传前，处理相关的事情
        },
        'UploadProgress': function(up, file) {
            // 每个文件上传时，处理相关的事情
        },
        'FileUploaded': function(up, file, info) {
            // 每个文件上传成功后，处理相关的事情
            var domain = up.getOption('domain');
            var res = JSON.parse(info.response);
            var sourceUrl = domain + '/' + res.key;
            console.log('上传成功：', sourceUrl);
        },
        'Error': function(up, err, errTip) {
            //上传出错时，处理相关的事情
            console.log('上传出错：', err, errTip);
        },
        'UploadComplete': function() {
            //队列文件处理完毕后，处理相关的事情
        }
    }
});

uploadButton.addEventListener('click', function() {
    uploader.start();
});

请注意，上面的示例中的 `qiniuUploadToken` 和 `domain` 属性需要替换为您的实际值。此外，您也需要引用七牛云的 JavaScript SDK，以便使用 `QiniuJsSDK` 类。