上传图片

html

<p class="remove"><label class="zfile btn btn-primary" id="imagePicker">添加照片</label></p>   //触发按钮
<div id="zTu">图片</div>  //放置图片的地方

js

function initImageUploader(activityID){
    var fileUrl='{{ .STATIC_FILE_HOST }}/api/v1/image/upload?type=exchangeAward&uid={{ .COMPANYID }}_'+activityID; //把base64转换本地的地址
    uploadImages('#imagePicker', fileUrl, function(file, res) {
      coverImage = res.url
      $('#zTu').get(0).innerHTML = '<div class="file-item thumbnail"><img style="max-height:180px" src="' + res.url + '" /></div>'
    })
  }

调用uploadImages方法

function uploadImages(picker, url, callback) {
    var img_uploader = WebUploader.create({
        auto: true,
        server: url,
        pick: picker,
        fileNumLimit: 1,
        fileSingleSizeLimit: 2097152, // 2M
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            // mimeTypes: 'image/*'
        },
        compress: {
            width: 300,
            compressSize: 102400 // < 100kb 不压缩
        },
    })

    var fileType = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']

    img_uploader.on('beforeFileQueued', function(file) {

        fileType.some(function(name) {
            return file.type === name
        })

        ? '' : alert('请上传正确的图片！')

    })

    img_uploader.on('uploadSuccess', function(file, res) {
        callback(file, res)
    })

    img_uploader.on('uploadError', function(file, reason) {
        console.log(reason);
    })

    img_uploader.on('uploadComplete', function(file) {
        img_uploader.reset()
    })

}