作者 王勇

做了个上传图片demo,上传git,做备份。欢迎十一到来

... ... @@ -23,6 +23,7 @@ export const updateTrailer = params =>{return http.put(`${baseUrl}/trailer/updat
export const deleteTrailer = params =>{return http.del(`${baseUrl}/trailer/delete`, params);};
// 挂车信息,批量删除
export const batchRemoveTrailer = params =>{return http.del(`${baseUrl}/trailer/batchRemove`, params);};
export const uploadFileImage = params =>{return http.post(`${baseUrl}/trailer/upload`,params)}
// 企业信息,分页查询
export const selectCorporationList = params =>{return http.get(`${baseUrl}/corporation/page`, params);};
... ...
... ... @@ -134,11 +134,23 @@
placeholder="请输入数据操作类型">
</el-input>
</el-form-item>
<el-form-item label="挂车牌号图片:" prop="trailerLicenseNoPic">
<img v-if="!trailer_config.progressFlag" style="width: 100px;height: 100px" :src="trailer_config.imageUrl"/>
<el-upload
style="display: inline; margin-left: 10px;margin-right: 10px;"
action=""
:show-file-list="true"
:http-request="uploadFile"
:limit=1
:on-preview="handPreView"
:on-exceed="fileExceed"
accept="image/jpeg,image/jpg,image/png"
ref="fileupload">
<el-button slot="trigger" size="small" type="primary">上传图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px">
<el-button type="info" @click="trailer_dialog.addDialog = false" size="medium"
... ... @@ -184,13 +196,20 @@
insertTrailer,
updateTrailer,
deleteTrailer,
batchRemoveTrailer,
batchRemoveTrailer, uploadFileImage
} from "../../api/vehicle_dispatch";
import {Message} from "element-ui";
export default {
name: "Trailer",
data() {
return {
trailerUpload: '',
trailer_config: {
progressFlag: true,
imageUrl: '',
},
/**
* 搜索参数
*/
... ... @@ -467,7 +486,27 @@
}).catch(() => {
});
},
// 自定义上传
uploadFile(item) {
const form = new FormData()
form.append('file', item.file)
uploadFileImage(form).then(response => {
let res = response.data;
if (res.code !== '200') {
this.$message.error(res.msg)
}
this.$message.success(res.msg);
item.onSuccess()
this.trailer_config.progressFlag = false;
this.trailer_config.imageUrl = res.data;
})
},
fileExceed() {
this.$message.error('别贪心!一次只能上传一个哦~');
},
handPreView(file) {
}
},
created() {
... ... @@ -479,5 +518,28 @@
</script>
<style scoped>
.avatar-uploader .avatar-uploader-icon {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar-uploader .avatar-uploader-icon:hover {
border-color: #409EFF;
}
.avatar-uploader img {
width: 178px;
height: 178px;
display: block;
}
</style>
\ No newline at end of file
... ...