有關laravel 上傳檔案的問題
前後端分離專案，前端用的是ElementPlus 後端用的是Laravel8*
前端部分：
<template>
<div class="Personal-Center">
<el-card shadow="never">
<template #header>
<div class="card-header">
<span>個人中心</span>
</div>
</template>
<div class="card_body">
<el-form :model="PersonalForm" ref="PersonalForm" label-width="100px">
<el-row :gutter="40">
<el-col :span="10">
<el-form-item label="所屬角色">
<el-input v-model="PersonalForm.role" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="管理員名稱">
<el-input v-model="PersonalForm.admin_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="登入密碼" prop="password"
:rules="[{required:false, validator:ValidatePass, trigger: 'blur'},{required:false, validator:ValidatePass, trigger: 'change'}]">
<el-input type="password" v-model="PersonalForm.password" clearable></el-input>
</el-form-item>
<el-form-item label="確認登入密碼" prop="confirm_password"
:rules="[{required:false,validator:ValidateConfirmPass,trigger:'blur'},{required:false,validator:ValidateConfirmPass,trigger:'change'}]">
<el-input type="password" v-model="PersonalForm.confirm_password" clearable></el-input>
</el-form-item>
<el-form-item label="電話" prop="phone"
:rules="[{required:false, validator:ValidatePhone, trigger: 'blur'},{required:false, validator:ValidatePhone, trigger: 'change'}]">
<el-input v-model="PersonalForm.phone" maxlength="11" clearable></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email"
:rules="[{required:false, validator:ValidateEmail, trigger: 'blur'},{required:false, validator:ValidateEmail, trigger: 'change'}]">
<el-input v-model="PersonalForm.email" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%" @click="HandleSubmit('PersonalForm')">提交
</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="頭像">
<el-upload
class="avatar-uploader"
:headers="Token"
:action="upload_url"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="PersonalForm.avatar" :src="PersonalForm.avatar" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-card>
</div>
</template><script>
import {validateEmail, validatePhone, UploadFileCheckFormat, UploadFileCheckSize} from "@/libs/tools";
import {admin_info} from "@/api/admins";
import {computed} from "vue";
import {getToken} from "@/libs/util";
import {uploadFiles} from "@/api/data";
import Config from '@/config'
export default {
name: "personalCenter",
setup() {
//const upload_url = Config.UploadUrl + '/upload_img';
const upload_url = 'http://localhost:1215/admin/upload_img';
const Token = computed(() => {
return {
"Authorization": "Bearer " + getToken(),
};
});
return {
Token,//上傳頭像頭部
upload_url,//上傳頭像地址
}
},
data() {
return {
PersonalForm: {
id: 0,
role: '',//所屬角色
admin_name: '',//管理員名稱
password: '',//登入密碼
confirm_password: '',//確認登入密碼
phone: '',//管理員電話
email: '',//管理員郵箱
avatar: '',//管理員頭像
},
}
},
computed: {
//驗證密碼
ValidatePass() {
return function (rule, value, callback) {
if (value && value.length < 6) {
callback(new Error("請填寫6位或6位以上的密碼"))
} else {
callback()
}
}
},
//驗證確認密碼
ValidateConfirmPass() {
const that = this;
return function (rule, value, callback) {
if (that.PersonalForm.password && value !== that.PersonalForm.password || value && !that.PersonalForm.password) {
callback(new Error("密碼和確認密碼不一致、請重新填寫確認密碼"))
} else {
callback()
}
}
},
//驗證郵箱
ValidateEmail() {
return function (rule, value, callback) {
if (!validateEmail(value) && value) {
callback(new Error("請輸入正確的郵箱地址"))
} else {
callback();
}
}
},
ValidatePhone() {
return function (rule, value, callback) {
if (!validatePhone(value) && value) {
callback(new Error("請輸入正確的電話號碼"))
} else {
callback();
}
}
}
},
methods: {
//上傳頭像成功
handleAvatarSuccess(response, file) {
file=JSON.parse(JSON.stringify(file));
console.log(file)
console.log(response)
// if (!file.data.filePath) file.data.filePath = 'client-sfvue'
// if (!file.data.fileName) file.data.fileName = file.file.filename
// uploadFiles(file.data.filePath, file.data.fileName, file)
},
//上傳頭像
beforeAvatarUpload(file) {
const format = ['jpg', 'jpeg', 'png'];
const Size = 3;
if (!UploadFileCheckFormat(file.name, format)) {
this.$notify.error({
title: '錯誤',
message: '頭像圖片格式不符，請上傳' + format + '格式的圖片',
duration: 2500
});
return false;
}
if (UploadFileCheckSize(file.size, Size)) {
this.$notify.error({
title: '錯誤',
message: '頭像圖片大小不得大於' + Size + 'M，請上傳大小等於小於' + Size + 'M的圖片',
duration: 2500
});
return false;
}
},
//提交資料
HandleSubmit(name) {
const Self = this;
Self.$refs[name].validate((valid) => {
if (valid) {
const post_data = JSON.parse(JSON.stringify(Self.PersonalForm));
console.log(post_data)
}
})
},
getUserInfo() {
admin_info().then((res) => {
const result = res.data.data;
this.PersonalForm.id = result.id;
this.PersonalForm.admin_name = result.admin_name;
this.PersonalForm.role = result.role.role_name;
this.PersonalForm.email = result.email ? result.email : '';
this.PersonalForm.phone = result.phone ? result.phone : '';
this.PersonalForm.avatar = result.avatar ? result.avatar : '';
})
}
},
mounted() {
this.getUserInfo();
}
}
</script>
<style lang="scss">
.Personal-Center {
width: 1200px;
height: 100%;
margin: auto;
.card_body {
.avatar-uploader {
margin-top: 15px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 155px;
height: 155px;
line-height: 155px;
text-align: center;
}
.avatar {
width: 155px;
height: 155px;
display: block;
}
}
}
</style>
選擇完圖片後：
後端部分：
上傳圖片也成功了，但是訪問這個地址就報404
返回的url是：
http://localhost:1215/storage/avatar/2wny2UB3Cun5uMInMu88W3HjuDzH2LSbndCNaixq.jpg
配置檔案：
搞了一天了，都沒找到問題所在，求大佬們幫忙
本作品採用《CC 協議》，轉載必須註明作者和本文連結