如何用elementUI优雅地上传图片并实现预览和拖拽

一、上传触发

有几点需要注意的是：

1. action为上传地址，是必选参数。一般情况下没有直接的上传地址，这时候只需要将action的值写为空，用http-request覆盖默认的上传行为，在http-request里自定义上传的实现方法

2. accept参数表示可以接受上传的文件类型，在打开文件选择器之后会只显示属于该类型的后缀名，但用户依然可以自己手动选择“所有文件(*.*)”并进行勾选，所以本质上需要在before-upload钩子函数里实现文件类型的根本限制

<el-upload 
    action=""
    :http-request="handleUpload"
    accept="image/jpeg,image/png"
    :before-upload="beforeUpload"
    :show-file-list="false"
    :file-list="imgList"
    multiple
>
    <el-button>上传图片</el-button>
</el-upload>

data(){
    return {
        imgList: [{img_id: 1, img_url:'https://....'}]
    }
},
methods: {
    beforeUpload(file){
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
    handleUpload(file){
        //此处调用接口（进行文件预签名，拿到签名地址进行保存等）
    },
}

二、上传后的图片展示

1. 采用el-image实现图片的预览

2. 利用vue-draggable第三方库来实现拖拽，拖拽之后自然会改变数组元素的顺序，这里根据自己的需要进行实时保存或统一保存。

Warning：拖拽有个问题是如果是相邻图片进行交换则只用更新这两张图片的顺序，如果跨越多个图片进行拖拽，则顺序受影响的元素都需要调用接口更新顺序，概括来说就是涉及插入/删除的时候网络开销很大，这里如果有好的解决方案可以跟我交流哦！！！

<draggable v-model="imgList">
    <transition-group class="img-container">
        <div v-for="item in imgList" :key="item.img_id" class="img-box">
            <el-image :src="item.img_url"
                :preview-src-list="imgList.map(d => d.img_url)">
            </el-image>
            <el-button icon="el-icon-close" circle 
                @click="removeImage(item, imgList)">
            </el-button>
        </div>
    </transition-group>
</draggable>

vue-draggable使用说明：vue.draggable中文文档 - itxst.com