有關laravel 上傳圖片訪問404的問題

艾尼亞爾發表於2021-07-13

有關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>

有關swoole+laravel 上傳檔案的問題

有關swoole+laravel 上傳檔案的問題

選擇完圖片後:

有關laravel 上傳檔案的問題

後端部分:

有關laravel 上傳圖片訪問404的問題
上傳圖片也成功了,但是訪問這個地址就報404

返回的url是:

http://localhost:1215/storage/avatar/2wny2UB3Cun5uMInMu88W3HjuDzH2LSbndCNaixq.jpg

有關laravel 上傳圖片訪問404的問題

配置檔案:

有關laravel 上傳圖片訪問404的問題

搞了一天了,都沒找到問題所在,求大佬們幫忙

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章