我想將個人資料圖片存盤在檔案系統（images/{username}_pfp.{extension} 并將其位置作為字串存盤在資料庫中。我的前端反應代碼是
const Signup = () => {
const [state, setState] = useState({
email: "",
password: "",
confirmPassword: "",
username: "",
profile_picture: "",
});
const navigate = useNavigate();
const onSubmit = (e) => {
e.preventDefault();
console.log(state.email, state.password, state.confirmPassword, state.username);
if (state.password === state.confirmPassword) {
getData('http://localhost:5000/users')
.then(data => {
console.log(data);
let userExists = false;
for (let i = 0; i < data.length; i ) {
if (data[i].email === state.email) {
userExists = true;
}
if (data[i].username === state.username) {
userExists = true;
}
}
if (userExists) {
alert("Email or Username already exists");
} else {
const data = new FormData();
for(var x = 0; x<state.profile_picture.length; x ) {
data.append('file', state.profile_picture[x])
}
postData('http://localhost:5000/users', {
email: state.email,
password: state.password,
name: state.username,
profile_picture: data
})
.then(data => {
console.log(data);
alert("User created successfully");
navigate('/');
})
.catch(err => {
console.log(err);
alert("Error creating user");
});
}
})
.catch(err => {
console.log(err);
alert("Error creating user");
});
};
};
return (
<>
<Header />
<div className="container">
<Form>
//creating other values
<Form.Group className="mb-3" controlId="formFile">
<Form.Label>Upload Profile Picture (image format must be png, jpg, or jpeg).</Form.Label>
<Form.Control type="file" onChange={e => setState(prevState => { return {...prevState, profile_picture: e.target.value}})}/>
</Form.Group>
<Button variant="primary" type="submit" onClick={onSubmit}>
Submit
</Button>
</Form>
</div>
</>
);
};
我的燒瓶后端代碼是
class UserListResource(Resource):
def get(self):
users = User.query.all()
return users_schema.dump(users)
def post(self):
received_file = request.json['profile_picture']
filename = request.json['name'] '_pfp' received_file.filename.split('.')[1]
filename = secure_filename(filename)
filename = os.path.join(app.config['UPLOAD_FOLDER'], filename)
received_file.save(filename)
new_user = User(
email=request.json['email'],
password=request.json['password'],
name=request.json['name'],
profile_picture=filename
)
db.session.add(new_user)
db.session.commit()
return user_schema.dump(new_user)
api.add_resource(UserListResource, '/users')
我從多個來源獲得了與此相關的代碼位（Flask - 獲取上傳檔案的名稱減去檔案擴展名，https://flask.palletsprojects.com/en/2.1.x/patterns/fileuploads/）。當圖片發送到后端時，它會給出一個 AttributeError: dict object has no attribute filename in backend 終端。我怎樣才能讓它作業？我錯過了什么嗎？
uj5u.com熱心網友回復：
所以。我嘗試了更多的東西，我想我會回復這個來為其他人記錄下來。我的前端代碼最終發送了兩個單獨的發布請求，一個發布 json 資料，另一個發布影像。
順便說一句，前端代碼使用react-bootstrap，但原理是一樣的。前端代碼：
const Signup = () => {
const [state, setState] = useState({
email: "",
password: "",
confirmPassword: "",
username: "",
});
const [profile_picture, setProfile_picture] = useState({});
const navigate = useNavigate();
const uploadedImage = (e) => {
console.log(e.target.files[0]);
const formData = new FormData();
formData.append('profile_picture', e.target.files[0]);
console.log(formData);
setProfile_picture(formData);
};
const onSubmit = (e) => {
e.preventDefault();
console.log(state.email, state.password, state.confirmPassword, state.username);
if (state.password === state.confirmPassword) {
getData('http://localhost:5000/users')
.then(data => {
console.log(data);
let userExists = false;
for (let i = 0; i < data.length; i ) {
if (data[i].email === state.email) {
userExists = true;
}
if (data[i].username === state.username) {
userExists = true;
}
}
if (userExists) {
alert("Email or Username already exists");
} else {
postData('http://localhost:5000/users', {
email: state.email,
password: state.password,
name: state.username,
})
.then(data => {
console.log(data);
alert("User created successfully");
fetch('http://localhost:5000/users/' data.name, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
cors: 'cors',
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: profile_picture,
})
.then(response => {
console.log(response);
})
navigate('/');
})
.catch(err => {
console.log(err);
alert("Error creating user in post thing");
});
}
})
.catch(err => {
console.log(err);
alert("Error creating user");
});
};
};
return (
<>
<Header />
<div className="container">
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" value={state.email} onChange={e => setState(prevState => { return {...prevState, email: e.target.value}})}/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
// making more input fields
<Form.Group className="mb-3" controlId="formFile">
<Form.Label>Upload Profile Picture (image format must be png, jpg, or jpeg).</Form.Label>
<Form.Control type="file" onChange={e => uploadedImage(e)}/>
</Form.Group>
<Button variant="primary" type="submit" onClick={onSubmit}>
Submit
</Button>
</Form>
</div>
</>
);
};
僅影像的后端代碼是
def post(self, user_name):
current_user = User.query.get_or_404(user_name)
received_file = request.files['profile_picture']
filename = current_user.name '_pfp' '.' received_file.filename.split('.')[1]
filename = secure_filename(filename)
filename = os.path.join(app.config['UPLOAD_FOLDER'], filename)
img_file = Image.open(received_file.stream)
img_file.save(filename)
current_user.profile_picture = filename
db.session.commit()
return user_schema.dump(current_user)
第一個發布請求只是將 profile_picture 欄位定義為空字串。當然，在用戶洗掉功能中添加幾行洗掉頭像檔案：
def delete(self, user_name):
user = User.query.get_or_404(user_name)
pfp_fname = user.profile_picture
os.remove(pfp_fname)
db.session.delete(user)
db.session.commit()
return '', 204
希望這會有所幫助，如果您需要澄清，請隨時發表評論:)。此外，postData 和 getData 函式在評論中，因為它們只是獲取請求。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/467337.html
標籤：javascript Python 反应 图片 烧瓶