<el-upload
? ? ? ? ? :data="extraData"
? ? ? ? ? class="avatar-uploader"
? ? ? ? ? :action="$actionUrl + '/upload/single/img'"
? ? ? ? ? :show-file-list="false"
? ? ? ? ? :on-success="handleAvatarSuccess"
? ? ? ? ? :before-upload="beforeAvatarUpload"
? ? ? ? ? @change="handUpImg($event)"
? ? ? ? >
? ? ? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar" />
? ? ? ? ? <div v-else class="avatar1">
? ? ? ? ? ? <img src="../../../../assets/img/shangchuan.png" alt="" />
? ? ? ? ? </div>
? ? ? ? ? <div class="el-upload__tip" slot="tip" style="margin-left: 30px">
? ? ? ? ? ? {{ imageUrl ? "重新上传" : "请上传png格式图片" }}
? ? ? ? ? </div>
? ? ? ? </el-upload>
?
? ? handleAvatarSuccess(res, file) {
? ? ? this.imageUrl1 = res.data;
? ? ? this.imageUrl = URL.createObjectURL(file.raw);
? ? ? // ? const _ = this;
? ? ? // ? let files = file.raw;
? ? ? // ? const formData = new FormData();
? ? ? // ? formData.append("file", files);
? ? ? // ? formData.append("prefix", "user");
? ? ? // ? _.$api.files_api
? ? ? // ? ? .singleImg(formData, {
? ? ? // ? ? ? headers: {
? ? ? // ? ? ? ? "Content-Type": "multipart/form-data",
? ? ? // ? ? ? ? Authorization: localStorage.getItem("token"),
? ? ? // ? ? ? },
? ? ? // ? ? })
? ? ? // ? ? .then((res) => {
? ? ? // ? ? ? if (res.code == 200) {
? ? ? // ? ? ? ? this.imageUrl1 = res.data;
? ? ? // ? ? ? }
? ? ? // ? ? })
? ? ? // ? ? .catch(() => {});
? ? },
? ? beforeAvatarUpload(file) {
? ? ? const isJPG = file.type === "image/jpeg";
? ? ? const isPNG = file.type === "image/png";
? ? ? if (!isJPG && !isPNG) {
? ? ? ? return this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
? ? ? }
3,data
?
?data() {
? ? return {
? ? ? extraData: {
? ? ? ? prefix: "user",
? ? ? },
? ? };
? },