laravel+vue+element 下的图片上传(前端拼接)

一. 图片上传
vue模版:

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="缩略图" :label-width="formLabelWidth" prop="image">
                <el-upload
                        action="http://upload.qiniup.com"
                        :data="qiniuForm"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="form.image" :src="form.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
</el-form>

<script>
    const uuidv1 = require('uuid/v1');
    export default {
        data() {
            return {
                options: [],
                value: '',
                formLabelWidth: '120px',
                qiniuForm: {
                    key: '',//文件名称
                    token: '',
                },
                form:
                    {
                        site_node_id: '',
                        name: '',
                        image: '',
                        is_show: '',
                        url: '',
                        sort: '',
                        desc: '',
                    },
                rules: {
                    site_node_id: [
                        {required: true}
                    ],
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur'}
                    ],
                    image: [
                        {required: true, message: '请上传图片'}
                    ],
                    url: [
                        {required: true, message: '请输入地址'}
                    ],
                    sort: [
                        {required: true, message: '请输入排序'}
                    ],
                    desc: [
                        {required: true, message: '请输入描述'}
                    ],
                },
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                axios.get(`/admin/sitenode`).then(res => {
                    this.options = res.data.sitenodes
                })
            },
            //上传之前,先验证,再拼接图片地址
            async beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                //如果验证失败,返回假
                if (isJPG && isLt2M == false) return false;

                //如果验证成功,获取token
                let fileType = file.type == 'image/jpeg' ? 'jpg' : 'png';//获取拓展名
                let res = await axios.get(`/uploadToken`)
                this.qiniuForm = {
                    ket: `${uuidv1()}.${fileType}`,//文件名
                    token: res.data.upToken
                }
                return true;
            },
            //上传之后
            handleAvatarSuccess(res, file) {
                this.form.image = 'http://luvxia.com/' + res.key
            },
            //提交新增
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post(`/admin/site`, this.form).then(res => {
                            this.init();
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    }
</script>

备注:

1. 由于我上传图片是使用七牛云.所以action="",这里要填写我七牛云的存储区域.我是华东地区,选择客户端上传:http(s)://upload.qiniup.com
2. :data="qiniuForm"对应下面的

qiniuForm: {
      key: '',//文件名称
      token: '',
                },

token由后端传过来,key由前端拼接
token后端:
a. 路由//单独路由,上传图片使用 Route::get('/uploadToken', 'PhotoController@uploadToken');
b. 控制器

public function uploadToken()
    {
        $bucket = '七牛云空间名';
        $accessKey = 'xxxxxx';
        $secretKey = 'xxxxx';
        $auth = new Auth($accessKey, $secretKey);
        $upToken = $auth->uploadToken($bucket);
        return response()->json(compact('upToken'));
    }

3. 图片上传之前:before-upload="beforeAvatarUpload"

//上传之前,先验证,再拼接图片地址
            async beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                //如果验证失败,返回假
                if (isJPG && isLt2M == false) return false;

                //如果验证成功,获取token
                let fileType = file.type == 'image/jpeg' ? 'jpg' : 'png';//获取拓展名
                let res = await axios.get(`/uploadToken`)
                this.qiniuForm = {
                    ket: `${uuidv1()}.${fileType}`,//文件名
                    token: res.data.upToken
                }
                return true;
            },

这里要注意在拼接key的时候 用到了uuid,百度:https://www.npmjs.com/package/uuid
步骤:
a. 终端跑命令:cnpm install uuid --S
b. 引用:const uuidv1 = require('uuid/v1');再拼接

4.上传图片之后::on-success="handleAvatarSuccess"

//上传之后
     handleAvatarSuccess(res, file) {
          this.form.image = 'http://luvxia.com/' + res.key
            },