更新记录

v1.14（2019-10-12） 下载此版本

增加header属性，支持设置请求头|。传图片到服务器时，HTTP 请求 Header, header 中不能设置 Referer。 https://github.com/smalltee/robby-image-upload/issues/7

v1.13（2019-09-25） 下载此版本

修改bug:1.使用v-model初始化时图片不显示。 2.修改上传进度提示默认为true，避免未上传完毕就点击了提交。 3._self的全局定义移到方法内部的局部定义，修改单页面无法使用多次的问题。|

v1.12（2019-07-19） 下载此版本

修改bug: 1.后退后再进入之前的图片还存在的问题，感谢602044025@qq.com提的意见。 2.单页出现滚动条时，在拖动图片时会导致页面一起拖动

平台兼容性

项目说明

本项目是基于uni-app的一个通用组件。可支持小程序，也支持APP。组件名称为“图片选择组件”，可添加，可删除，可预览，可拖动调整顺序，可上传到后台服务器（服务器端需要自己写）

组件功能说明：

1. 可选择多张图片
2. 选择图片后自动添加到后面
3. 图片上自带删除图标，点击可删除
4. 删除图标可配置显示/隐藏
5. 图片可点击预览
6. 图片可拖动重新排序
7. 图片删除时可触发删除事件
8. 添加图片可配置显示/隐藏
9. 可获取当前的图片地址数组
10. 可上传图片到服务器
11. 可设置上传的图片数量

使用说明

拷贝该组件到components目录下之后

在 script中引用组件

import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
export default {
    components: {robbyImageUpload}
}

在 template 中使用组件：

初始化显示图片
<robby-image-upload :value="imageData"></robby-image-upload>

绑定图片数据，监听添加、删除事件，设置是否拖拉，是否可删除，是否可选择添加，图片数量限制
<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" :enable-drag="enableDrag" :enable-del="enableDel" :enable-add="enableAdd" :limit="limitNumber"></robby-image-upload>

支持图片上传服务器：选择图片后，组件会自动上传到指定地址，并更新组件中保存的图片地址为服务器地址
<robby-image-upload :server-url="serverUrl" :form-data="formData" :header="header"></robby-image-upload>

双向绑定说明

v-model: 类型为字符串数组。 即图片地址数组，可用于初始化，当添加/删除操作时，绑定的数据都会同步更新

属性说明

后台上传图片代码编写说明（可参考下面:后台上传图片demo）

1. 在服务器获取的文件key值默认为“upload-images”，可通过参数fileKeyName来自定义名字
2. 因为微信只支持单张上传，所以此组件的实现为连续单张上传，而不是一次上传多张图片
3. 上传成功后，需要图片的新地址传回来，用于前端更新图片地址

后台删除图片代码编写说明（可参考下面:后台删除图片demo）

1. 调用该删除接口时，传输参数为：imagePath。该参数表示删除的图片完整地址（如：http://localhost:1234/2/2834o21.jpg)

事件说明

demo示例

<template>
    <view class="">
        <robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" :server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl"></robby-image-upload>
        <view v-for="(item,index) in imageData" :key="index" class="">
            {{index}}. {{item.substr(-14)}}
        </view>
    </view>
</template>
<script>
    import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
    export default {
        data() {
            return {
                enableDel : false,
                enableAdd : false,
                enableDrag : false,
                limitNumber: 8,
                imageData : [],
                serverUrl: 'http://localhost:1234/work/uploadWorkPicture',
                serverUrlDeleteImage: 'http://localhost:1234/work/deleteWorkPicture',
                formData: {
                    userId: 2
                }
            } 
        },
        components: {robbyImageUpload},
        methods:{
            deleteImage: function(e){
                console.log(e)
            },
            addImage: function(e){
                console.log(e)
            }
        }
    }
</script>

后台接收上传图片/删除图片示例代码(Node JS)

var express = require('express');
var router = express.Router();
var path = require('path')
var fs = require('fs')
var multiparty = require('connect-multiparty')
var multipartyMiddleware = new multiparty()

router.post('/uploadWorkPicture', multipartyMiddleware, function(req, res){
    //userId为前端传输的formData中自定义的数据
    var userId = req.body.userId
    var uploadedImage = req.files['upload-images']

    //复制上传的文件到指定目录work_material/:userid
    var sourceStream = fs.createReadStream(uploadedImage.path)
    var destStream = fs.createWriteStream('./work_material/'+userId+'/'+uploadedImage.name)
    sourceStream.pipe(destStream)

    sourceStream.on('end', function(){
        //删除临时文件
        fs.unlinkSync(uploadedImage.path)
        console.log('Success upload image' + uploadedImage.name)
        //返回给前端的数据，前端会将对应图片地址更新为该服务器地址
        res.send('http://localhost:3000/'+userId+'/'+uploadedImage.name)
    })
})

router.get('/deleteWorkPicture', function(req, res){
    var serverPrefix = 'http://localhost:1234/'
    var str = req.query.imagePath
    var filePath = path.join(__dirname + '/../work_material/' + str.replace(serverPrefix, ''))
    fs.unlink(filePath, function(err){
        if(err){
            res.send({
                errcode: 1,
                errmsg: err.message
            })
        }else{
            res.send({
                errcode: 0,
                errmsg: 'success to delete image: ' + str
            })
        }
    })
})

module.exports = router;

历史版本说明